Prime Icons

PrimeIcons is the default icon library of PrimeReact with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeReact components can use any icon with templating.

Browse all 250+ icons on primeicons.org.

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 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.

basic-demo

import { Check } from '@primeicons/react/check';
import { Search } from '@primeicons/react/search';
import { Times } from '@primeicons/react/times';
import { User } from '@primeicons/react/user';

export default function BasicDemo() {
    return (
        <div className="flex justify-center gap-4">
            <Check />
            <Times />
            <Search />
            <User />
        </div>
    );
}

Size#

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

size-demo

import { Check } from '@primeicons/react/check';
import { Search } from '@primeicons/react/search';
import { Times } from '@primeicons/react/times';
import { User } from '@primeicons/react/user';

export default function SizeDemo() {
    return (
        <div className="flex justify-center items-center gap-4">
            <Check style={{ fontSize: '1rem' }} />
            <Times style={{ fontSize: '1.5rem' }} />
            <Search style={{ fontSize: '2rem' }} />
            <User style={{ fontSize: '2.5rem' }} />
        </div>
    );
}

Color#

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

color-demo

import { Check } from '@primeicons/react/check';
import { Search } from '@primeicons/react/search';
import { Times } from '@primeicons/react/times';
import { User } from '@primeicons/react/user';

export default function ColorDemo() {
    return (
        <div className="flex justify-center items-center gap-4">
            <Check style={{ color: '#22c55e' }} />
            <Times style={{ color: '#ef4444' }} />
            <Search style={{ color: '#3b82f6' }} />
            <User style={{ color: '#a855f7' }} />
        </div>
    );
}

Spin#

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

spin-demo

import { Cog } from '@primeicons/react/cog';
import { Spinner } from '@primeicons/react/spinner';

export default function SpinDemo() {
    return (
        <div className="flex justify-center gap-4">
            <Spinner className="animate-spin" style={{ fontSize: '2rem' }} />
            <Cog className="animate-spin" style={{ fontSize: '2rem' }} />
        </div>
    );
}