Icons
PrimeIcons is the default icon library of PrimeNG with over 250 premium icons developed by PrimeTek. PrimeIcons library is optional as PrimeNG components can use any icon with templating.
Download #
@primeicons/angular is available at npm, run the following command to download it to your project.
Import #
Each icon is a standalone Angular component. Import them individually for optimal tree-shaking, or use the named exports from the package root, then add them to the imports array of your standalone component.
Figma #
PrimeIcons library is now available on Figma Community. By adding them as a library, you can easily use these icons in your designs.
Examples #
Basic #
Each icon is a standalone Angular component rendered as an inline SVG, displayed by importing it from @primeicons/angular and using it with the data-p-icon attribute.
Size #
Size of an icon is controlled with the size property that accepts a number in pixels or any CSS length value.
Color #
Icon color is defined with the color property which is inherited from the parent with currentColor by default.
Spin #
Use the spin property to apply a rotation animation to an icon. Alternatively, a spin animation utility such as animate-spin from Tailwind can also be used.
Programmatic #
An icon can be rendered programmatically by binding its name to the pIcon attribute, so the displayed icon can be changed at runtime from a variable.
List #
Here is the full list of PrimeIcons. Click an icon to copy its import statement. More icons will be added periodically and you may also request new icons at the issue tracker.