Icons

PrimeIcons is the default icon library of PrimeReact.

Download#

PrimeIcons is available at npm, run the following command to download it to your project.


npm install primeicons

Import#

CSS file of the icon library needs to be imported in your application.


import 'primeicons/primeicons.css';

Figma#

PrimeIcons library is now available on Figma Community. By adding them as a library, you can easily use these icons in your designs.

Basic#

PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element such as i or span


<i className="pi pi-check"></i>
<i className="pi pi-times"></i>
<span className="pi pi-search"></span>
<span className="pi pi-user"></span>

Size#

Size of an icon is controlled with the fontSize property of the element.


<i className="pi pi-check" style={{ fontSize: '1rem' }}></i>
<i className="pi pi-times" style={{ fontSize: '1.5rem' }}></i>
<i className="pi pi-search" style={{ fontSize: '2rem' }}></i>
<i className="pi pi-user" style={{ fontSize: '2.5rem' }}></i>

Color#

Icon color is defined with the color property which is inherited from parent by default.


<i className="pi pi-check" style={{ color: 'slateblue' }}></i>
<i className="pi pi-times" style={{ color: 'green' }}></i>
<i className="pi pi-search" style={{ color: 'var(--primary-color)' }}></i>
<i className="pi pi-user" style={{ color: '#708090' }}></i>

Spin#

Special pi-spin class applies infinite rotation to an icon.


<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
<i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }}></i>

Constants#

Constants API is available to reference icons easily when used programmatically.


import React from 'react'; 
import { Menu } from 'primereact/menu';
import { PrimeIcons } from 'primereact/api';

export default function ConstantsDemo() {
    const items = [
        {
            label: 'File',
            items: [
                { label: 'New', icon: PrimeIcons.PLUS },
                { label: 'Open', icon: PrimeIcons.DOWNLOAD }
            ]
        }
    ];

    return (
        <Menu model={items} />
    )
}

List#

Here is the full list of PrimeIcons. More icons will be added periodically and you may also request new icons at the issue tracker.