Complete PrimeIcons Guide 2026: Installation, Configuration, and Full Icon List
The definitive manual for integrating PrimeIcons into modern web applications. Whether you use PrimeNG, PrimeReact, or PrimeVue, learn how to style and deploy professional icons with ease.
# Getting Started with PrimeIcons in 2026
PrimeIcons is the official icon library from PrimeTek, designed specifically for their UI component ecosystems. In 2026, it remains one of the most optimized icon sets, providing a font-based solution that is both lightweight and extremely easy to scale.
# How to Install PrimeIcons via NPM
Installation is straightforward using any modern package manager. Run the following command in your project root:
npm install primeicons --save
# Configuring PrimeIcons CSS for Angular, React, and Vue
Option 1: Importing CSS in styles.css
This is the most common method for all frameworks. Add the following import to your global CSS file:
Option 2: Configuring angular.json for Angular
For PrimeNG projects, adding the path to the styles array is the recommended practice for performance.
"styles": [
"node_modules/primeicons/primeicons.css",
"src/styles.css"
]
# Advanced Styling: Customizing Size, Color, and Animations
PrimeIcons can be styled using standard CSS classes since they are rendered as font characters.
<!-- Basic Usage -->
<i class="pi pi-check"></i>
<!-- Custom Styles -->
<i class="pi pi-spin pi-spinner" style="font-size: 2rem; color: #3F51B5"></i>
When presenting icons in a complex UI, like an Angular Material Expansion Panel guide, consistency in icon size and color is key to a polished look.
# Complete PrimeIcons Category List
pi-check
Form Icon
pi-times
Form Icon
pi-search
Navigation
pi-user
Account
pi-cog
Settings
pi-envelope
Media
...Browse hundreds more in the official library bundle.
# Troubleshooting Icons
Why are PrimeNG Icons Not Showing?
Check your relative paths in angular.json. If your icons appear as small boxes, the font files (.woff/.ttf) are not being correctly loaded into the distribution folder.