Icons

Download

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

npm install primeicons
 

Then import the library.

import 'primeicons/primeicons.css';
 

Getting Started

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 mr-2"></i>
<i className="pi pi-times"></i>
 

Size

Size of the icons can easily be changed using font-size property.

<i className="pi pi-check"></i>
 

<i className="pi pi-check" style={{'fontSize': '2em'}}></i>
 

Spinning Animation

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

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

Constants

PrimeIcons constants API is provided to easily choose an icon e.g. when defining a menu model.

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

const MenuDemo = () => {

    const items = [
        {
            label: 'File',
            items: [
                {label: 'New', icon: PrimeIcons.PLUS},
                {label: 'Open', icon: PrimeIcons.DOWNLOAD}
            ]
        },
        {
            label: 'Edit',
            items: [
                {label: 'Undo', icon: PrimeIcons.REFRESH},
                {label: 'Redo', icon: PrimeIcons.REPEAT}
            ]
        }
    ];

    return <Menu model={items} />
}
 

List of Icons

Here is the current list of PrimeIcons, more icons will be added periodically. You may also request new icons at the issue tracker.