Source: https://primereact.org/icons/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7

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

Copy

Import#

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

import 'primeicons/primeicons.css';

Copy

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>

Copy

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>

Copy

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>

Copy

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>

Copy

Constants#

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

File
New
Open

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} />
)
```
}

Copy

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.

Download
Import
Figma
Basic
Size
Color
Spin
Constants
List

PrimeReact 10.9.7 by PrimeTek