Prime Icons

Download#

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

Import#

CSS file of the icon library needs to be imported in styles.css of 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 can be displayed using @primeicons/react components. A standalone icon can be displayed easily.

<Check />
<Times />
<Search />
<User />

Size#

Size of an icon is controlled with the font-size property of the element or the className prop.

<Check style={{ fontSize: '1rem' }} />
<Times style={{ fontSize: '1.5rem' }} />
<Search style={{ fontSize: '2rem' }} />
<User style={{ fontSize: '2.5rem' }} />

Color#

Icon color is defined with inline styles or className and is inherited from parent by default.

<Check style={{ color: '#22c55e' }} />
<Times style={{ color: '#ef4444' }} />
<Search style={{ color: '#3b82f6' }} />
<User style={{ color: '#a855f7' }} />

Spin#

The animate-spin Tailwind class applies infinite rotation to an icon.

<Spinner className="animate-spin" style={{ fontSize: '2rem' }} />
<Cog className="animate-spin" style={{ fontSize: '2rem' }} />

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.