Icons

PrimeReact components internally use PrimeIcons library, the official icons suite from PrimeTek.

Download

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

npm install primeicons --save

Getting Started

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

<i className="pi pi-check" style={{ marginRight: '.5rem' }}></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: '2rem' }}></i>

Spinning Animation

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

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

Constants

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

<Menu model={items} />

import {PrimeIcons} from 'primereact/api';

const items = [
    {
        label: 'Update',
        icon: PrimeIcons.REFRESH,
        to: '/update'
    },
    {
        label: 'Delete',
        icon: PrimeIcons.TIMES,
        to: '/delete'
    }
]

List of Icons

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