Complete Prime Icons list with examples
primeicons tutorials
pi pi-icon
attribute is used to display primeicons on web applications. prime icons can be used in HTML content using the
ior
span` tag.
pi pi-{iconname}
class attributes are added to tag i or span tag to display in the browser.
`pi-thumbs-up’ displays thumbs up icon.
Example code for displaying prime icons using i and span tags
<i class="pi pi-thumbs-up">pi-thumbs-up </i>
<br />
<span class="pi pi-thumbs-up">pi-thumbs-up</span>
These icons are not limited to angular or npm-based applications, You can use them on any web or mobile page by configuring CSS files.
All the prime icons are available in a single CSS file. primeicons
are already hosted in the CDN network, All you need to do is to add the `primeicons CDN URL using the link tag
<link
href="https://cdn.jsdelivr.net/npm/primeicons@2.0.0/primeicons.css"
rel="stylesheet"
/>
Important points about prime icons.
- It supports all the latest browsers and all devices
- it can be used with primeicons CDN or npm library
- This can be customized like font size, color, animations
- primeicons CSS file provides 200 icons with different categories
font style -size and color
Icons displayed with default inherit the font and color class attribute, You can also change the font size and color of the icon using the style attribute.
Code is
<i class="pi pi-google">Default size</i>
<i class="pi pi-google" style="font-size: 2em:color:green">font-size is 2em</i>
and output is
<br /><br />
<br />
<i class="pi pi-google">Default size</i>
<br />
<i class="pi pi-google" style="font-size: 2em;color:green">font-size is 2em</i>
animations
Animations to the icons can be applied using the pi-spin
class attribute. pi-spin
makes the icon rotate at infinite times.
This will not work with adding pi-spin to the class attribute of the icon.
All you have to install an angular animation module in your applications Please install the module using the @angular/animations npm command.
npm install @angular/animations --save
Here is an example of icon spinner animation
<i class="pi pi-spin pi-spinner">Default size</i>
Install primeng icons using npm
primeicons is an icon library for Primeng
, primeReact
, primeVue
and primefaces
framework.
primeicons library available npm package, used in nodejs-based applications like angular
, reactJs
and Vuejs
npm install primeicons --save
yarn install primeicons
This installs primeicons dependencies to the npm application.
Configure prime-related CSS
In your application, a One-time setup is to configure the required CSS,
There are three types of the following CSS configured.
- Theme css -nova-dark, nova-dark’s theme.css
- Component css- primeng.min.css
- icon css -primeicon.css
These can be configured in three ways.
Import css in style.class
CSS @import
is used to copy the required CSS file content into the current CSS file. required CSS is configured to import it in style.CSS
@import "~primeicons/primeicons.css"; @import
"~primeng/resources/themes/nova-dark/theme.css"; @import
"~primeng/resources/primeng.min.css";
configure CSS files in angular.json
This approach works for angular
applications. Other ReactJS
and VueJS
applications, the Other 2 ways are used to configure prime CSS. Once this is configured location, These are available across all components of your application.
"styles": [
"styles.css",
"../node_modules/primeicons/primeicons.css",
"../node_modules/primeng/resources/themes/nova-dark/theme.css",
"../node_modules/primeng/resources/primeng.min.css"
],
link css in index.html
Configure CSS files like normal files in index.html, so that it is available across all pages.
<link
rel="stylesheet"
type="text/css"
href="/node_modules/primeicons/primeicons.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/node_modules/primeng/resources/themes/nova-dark/theme.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/node_modules/primeng/resources/primeng.min.css"
/>
pi-icons categories list
Icon Name | pi-icon code |
---|---|
pi-step-backward-alt | <i class="pi pi-step-backward-alt">pi-step-backward-alt</i> |
pi-compass | <i class="pi pi-compass">pi-compass</i> |
pi-id-card | <i class="pi pi-id-card">pi-id-card</i> |
pi-ticket | <i class="pi pi-ticket">pi-ticket</i> |
pi-reply | <i class="pi pi-reply">pi-reply</i> |
pi-directions-alt | <i class="pi pi-directions-alt">pi-forward</i> |
pi-directions | <i class="pi pi-directions">pi-directions</i> |
pi-thumbs-up | <i class="pi pi-thumbs-up">pi-thumbs-up</i> |
pi-thumbs-down | <i class="pi pi-thumbs-down">pi-thumbs-down</i> |
pi-sort-numeric-down-alt | <i class="pi pi-sort-numeric-down-alt">pi-sort-numeric-down-alt</i> |
pi-sort-numeric-up-alt | <i class="pi pi-sort-numeric-up-alt">pi-sort-numeric-up-alt</i> |
pi-sort-numeric-down | <i class="pi pi-sort-numeric-down">pi-sort-numeric-down</i> |
pi-sort-numeric-up | <i class="pi pi-sort-numeric-up">pi-sort-numeric-up</i> |
pi-sort-alpha-down | <i class="pi pi-sort-alpha-down">pi-sort-alpha-down</i> |
pi-sort-alpha-up | <i class="pi pi-sort-alpha-up">pi-sort-alpha-up</i> |
pi-sort-alt | <i class="pi pi-sort-alt">pi-sort-alt</i> |
pi-sort-amount-up | <i class="pi pi-sort-amount-up">pi-sort-amount-up</i> |
pi-sort-amount-down | <i class="pi pi-sort-amount-down">pi-sort-amount-down</i> |
pi-sort-amount-down-alt | <i class="pi pi-sort-amount-down-alt">pi-sort-amount-down-alt</i> |
pi-sort-amount-up-alt | <i class="pi pi-sort-amount-up-alt">pi-sort-amount-up-alt</i> |
pi-palette | <i class="pi pi-palette">pi-palette</i> |
pi-undo | <i class="pi pi-undo">pi-id-card</i> |
pi-desktop | <i class="pi pi-desktop">pi-desktop</i> |
pi-sliders-v | <i class="pi pi-sliders-v">pi-sliders-v</i> |
pi-sliders-h | <i class="pi pi-sliders-h">pi-sliders-h</i> |
pi-search-plus | <i class="pi pi-search-plus">pi-search-plus</i> |
pi-search-minus | <i class="pi pi-search-minus">pi-search-minus</i> |
pi-check-square | <i class="pi pi-check-square">pi-check-square</i> |
pi-chart-line | <i class="pi pi-chart-line">pi-chart-line</i> |
pi-user-edit | <i class="pi pi-user-edit">pi-user-edit</i> |
pi-exclamation-circle | <i class="pi pi-exclamation-circle">pi-exclamation-circle</i> |
pi-android | <i class="pi pi-android">pi-android</i> |
pi-google | <i class="pi pi-google">pi-google</i> |
pi-apple | <i class="pi pi-apple">pi-apple</i> |
pi-microsoft | <i class="pi pi-microsoft">pi-microsoft</i> |
pi-heart | <i class="pi pi-heart">pi-heart</i> |
pi-mobile | <i class="pi pi-mobile">pi-mobile</i> |
pi-tablet | <i class="pi pi-tablet">pi-tablet</i> |
pi-key | <i class="pi pi-key">pi-key</i> |
pi-shopping-cart | <i class="pi pi-shopping-cart">pi-shopping-cart</i> |
pi-comments | <i class="pi pi-comments">pi-comments</i> |
pi-comment | <i class="pi pi-comment">pi-comment</i> |
pi-briefcase | <i class="pi pi-briefcase">pi-briefcase</i> |
pi-bell | <i class="pi pi-bell">pi-bell</i> |
pi-paperclip | <i class="pi pi-paperclip">pi-paperclip</i> |
pi-share-alt | <i class="pi pi-share-alt">pi-share-alt</i> |
pi-envelope | <i class="pi pi-envelope">pi-envelope</i> |
pi-money-bill | <i class="pi pi-money-bill">pi-money-bill</i> |
pi-images | <i class="pi pi-images">pi-images</i> |
pi-sign-in | <i class="pi pi-sign-in">pi-sign-in</i> |
pi-sign-out | <i class="pi pi-sign-out">pi-sign-out</i> |
pi-wifi | <i class="pi pi-wifi">pi-wifi</i> |
pi-sitemap | <i class="pi pi-sitemap">pi-forward</i> |
pi-chart-bar | <i class="pi pi-chart-bar">pi-chart-bar</i> |
pi-camera | <i class="pi pi-camera">pi-camera</i> |
pi-dollar | <i class="pi pi-dollar">pi-dollar</i> |
pi-lock-open | <i class="pi pi-lock-open">pi-lock-open</i> |
pi-table | <i class="pi pi-table">pi-table</i> |
pi-map-marker | <i class="pi pi-map-marker">pi-map-marker</i> |
pi-list | <i class="pi pi-list">pi-list</i> |
pi-eye-slash | <i class="pi pi-eye-slash">pi-eye-slash</i> |
pi-eye | <i class="pi pi-eye">pi-eye</i> |
pi-folder-open | <i class="pi pi-folder-open">pi-folder-open</i> |
pi-folder | <i class="pi pi-folder">pi-folder</i> |
pi-inbox | <i class="pi pi-inbox">pi-inbox</i> |
pi-lock | <i class="pi pi-lock">pi-lock</i> |
pi-unlock | <i class="pi pi-unlock">pi-unlock</i> |
pi-tags | <i class="pi pi-tags">pi-tags</i> |
pi-tag | <i class="pi pi-tag">pi-tag</i> |
pi-power-off | <i class="pi pi-power-off">pi-power-off</i> |
pi-save | <i class="pi pi-save">pi-save</i> |
pi-question-circle | <i class="pi pi-question-circle">pi-question-circle</i> |
pi-question | <i class="pi pi-question">pi-question</i> |
pi-clone | <i class="pi pi-clone">pi-clone</i> |
pi-calendar-times | <i class="pi pi-calendar-times">pi-calendar-times</i> |
pi-calendar-minus | <i class="pi pi-calendar-minus">pi-calendar-minus</i> |
pi-calendar-plus | <i class="pi pi-calendar-plus">pi-calendar-plus</i> |
pi-ellipsis-v | <i class="pi pi-ellipsis-v">pi-ellipsis-v</i> |
pi-ellipsis-h | <i class="pi pi-ellipsis-h">pi-ellipsis-h</i> |
pi-bookmark | <i class="pi pi-bookmark">pi-bookmark</i> |
pi-globe | <i class="pi pi-globe">pi-globe</i> |
pi-filter | <i class="pi pi-filter">pi-filter</i> |
pi-print | <i class="pi pi-print">pi-print</i> |
pi-align-right | <i class="pi pi-align-right">pi-align-right</i> |
pi-align-left | <i class="pi pi-align-left">pi-align-left</i> |
pi-align-center | <i class="pi pi-align-center">pi-align-center</i> |
pi-align-justify | <i class="pi pi-align-justify">pi-align-justify</i> |
pi-cog | <i class="pi pi-cog">pi-cog</i> |
pi-cloud-download | <i class="pi pi-cloud-download">pi-cloud-download</i> |
pi-cloud-upload | <i class="pi pi-cloud-upload">pi-cloud-upload</i> |
pi-cloud | <i class="pi pi-cloud">pi-cloud</i> |
pi-pencil | <i class="pi pi-pencil">pi-pencil</i> |
pi-users | <i class="pi pi-users">pi-users</i> |
pi-clock | <i class="pi pi-clock">pi-clock</i> |
pi-user-minus | <i class="pi pi-user-minus">pi-user-minus</i> |
pi-user-plus | <i class="pi pi-user-plus">pi-user-plus</i> |
pi-trash | <i class="pi pi-trash">pi-trash</i> |
pi-window-minimize | <i class="pi pi-window-minimize">pi-window-minimize</i> |
pi-window-maximize | <i class="pi pi-window-maximize">pi-window-maximize</i> |
pi-external-link | <i class="pi pi-external-link">pi-external-link</i> |
pi-refresh | <i class="pi pi-refresh">pi-refresh</i> |
pi-user | <i class="pi pi-user">pi-user</i> |
pi-exclamation-triangle | <i class="pi pi-exclamation-triangle">pi-exclamation-triangle</i> |
pi-calendar | <i class="pi pi-calendar">pi-calendar</i> |
pi-chevron-circle-left | <i class="pi pi-chevron-circle-left">pi-chevron-circle-left</i> |
pi-chevron-circle-down | <i class="pi pi-chevron-circle-down">pi-chevron-circle-down</i> |
pi-chevron-circle-right | <i class="pi pi-chevron-circle-right">pi-chevron-circle-right</i> |
pi-chevron-circle-up | <i class="pi pi-chevron-circle-up">pi-chevron-circle-up</i> |
pi-angle-double-down | <i class="pi pi-angle-double-down">pi-angle-double-down</i> |
pi-angle-double-left | <i class="pi pi-angle-double-left">pi-angle-double-left</i> |
pi-angle-double-right | <i class="pi pi-angle-double-right">pi-angle-double-right</i> |
pi-angle-double-up | <i class="pi pi-angle-double-up">pi-angle-double-up</i> |
pi-angle-down | <i class="pi pi-angle-down">pi-angle-down</i> |
pi-angle-left | <i class="pi pi-angle-left">pi-angle-left</i> |
pi-angle-right | <i class="pi pi-angle-right">pi-angle-right</i> |
pi-angle-up | <i class="pi pi-angle-up">pi-angle-up</i> |
pi-upload | <i class="pi pi-upload">pi-upload</i> |
pi-download | <i class="pi pi-download">pi-download</i> |
pi-ban | <i class="pi pi-ban">pi-ban</i> |
pi-star-o | <i class="pi pi-star-o">pi-star-o</i> |
pi-star | <i class="pi pi-star">pi-star</i> |
pi-chevron-left | <i class="pi pi-chevron-left">pi-chevron-left</i> |
pi-chevron-right | <i class="pi pi-chevron-right">pi-chevron-right</i> |
pi-chevron-down | <i class="pi pi-chevron-down">pi-chevron-down</i> |
pi-chevron-up | <i class="pi pi-chevron-up">pi-chevron-up</i> |
pi-caret-left | <i class="pi pi-caret-left">pi-caret-left</i> |
pi-caret-right | <i class="pi pi-caret-right">pi-caret-right</i> |
pi-caret-down | <i class="pi pi-caret-down">pi-caret-down</i> |
pi-caret-up | <i class="pi pi-caret-up">pi-caret-up</i> |
pi-search | <i class="pi pi-search">pi-search</i> |
pi-check | <i class="pi pi-check">pi-check</i> |
pi-check-circle | <i class="pi pi-check-circle">pi-check-circle</i> |
pi-times | <i class="pi pi-times">pi-times</i> |
pi-times-circle | <i class="pi pi-times-circle">pi-times-circle</i> |
pi-plus | <i class="pi pi-plus">pi-plus</i> |
pi-plus-circle | <i class="pi pi-plus-circle">pi-plus-circle</i> |
pi-minus | <i class="pi pi-minus">pi-minus</i> |
pi-minus-circle | <i class="pi pi-minus-circle">pi-minus-circle</i> |
pi-circle-on | <i class="pi pi-circle-on">pi-circle-on</i> |
pi-circle-off | <i class="pi pi-circle-off">pi-circle-off</i> |
pi-sort-down | <i class="pi pi-sort-down">pi-sort-down</i> |
pi-sort-up | <i class="pi pi-sort-up">pi-sort-up</i> |
pi-sort | <i class="pi pi-sort">pi-sort</i> |
pi-step-backward | <i class="pi pi-step-backward">pi-step-backward</i> |
pi-step-forward | <i class="pi pi-step-forward">pi-step-forward</i> |
pi-th-large | <i class="pi pi-th-large">pi-th-large</i> |
pi-arrow-down | <i class="pi pi-arrow-down">pi-arrow-down</i> |
pi-arrow-left | <i class="pi pi-arrow-left">pi-arrow-left</i> |
pi-arrow-right | <i class="pi pi-arrow-right">pi-arrow-right</i> |
pi-arrow-up | <i class="pi pi-arrow-up">pi-arrow-up</i> |
pi-bars | <i class="pi pi-bars">pi-bars</i> |
pi-arrow-circle-down | <i class="pi pi-arrow-circle-down">pi-arrow-circle-down</i> |
pi-arrow-circle-left | <i class="pi pi-arrow-circle-left">pi-arrow-circle-left</i> |
pi-arrow-circle-right | <i class="pi pi-arrow-circle-right">pi-arrow-circle-right</i> |
pi-arrow-circle-up | <i class="pi pi-arrow-circle-up">pi-arrow-circle-up</i> |
pi-info | <i class="pi pi-info">pi-info</i> |
pi-info-circle | <i class="pi pi-info-circle">pi-info-circle</i> |
pi-home | <i class="pi pi-home">pi-home</i> |
pi-spinner | <i class="pi pi-spinner">pi-spinner</i> |
pi-icon category list file
Icon Name | pi-icon code |
---|---|
pi-file | <i class="pi pi-file">pi-file</i> |
pi-file-excel | <i class="pi pi-file-excel">pi-file-excel</i> |
pi-file-pdf | <i class="pi pi-file-pdf">pi-file-pdf</i> |
pi-file-o | <i class="pi pi-file-o">pi-file-o</i> |
pi-icon List Category-audio video
Icon Name | pi-icon code |
---|---|
pi-step-backward-alt | <i class="pi pi-step-backward-alt">pi-step-backward-alt</i> |
pi-step-forward-alt | <i class="pi pi-step-forward-alt">pi-step-forward-alt</i> |
pi-forward | <i class="pi pi-forward">pi-forward</i> |
pi-backward | <i class="pi pi-backward">pi-backward</i> |
pi-fast-backward | <i class="pi pi-fast-backward">pi-fast-backward</i> |
pi-fast-forward | <i class="pi pi-fast-forward">pi-fast-forward</i> |
pi-pause | <i class="pi pi-pause">pi-pause</i> |
pi-play | <i class="pi pi-play">pi-play</i> |
pi-eject | <i class="pi pi-eject">pi-eject</i> |
primeng icons not showing in angular applications
primeicons.css
file is not imported or configured correctly.
Please make sure that the below steps are followed
- Install the
primeicons npm
dependency - Configure CSS files in your application, Please refer to configure CSS section
How to add a prime icon to a button
You learned how to configure primeicons in an application.
Let`s see how to add icons to primeng icons in angular applications.
This example demonstrates how to add prime icons to the Primeng button. This is the same process for adding prime icons, paginator
, datatable
and dropdown
etc.
Install primeicons and primeng dependencies
import ButtonModule in app.module.ts and configure CSS as seen above
.
add icons to the HTML buttons.
First ButtonModule
in your app.module.ts and configured to use element in an array of imports as below
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [ButtonModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Icons can be added on a button using the icon attribute, positions also can be configured using the iconPos
attribute
<button pButton type="button" icon="pi pi-home" iconPos="left">Home</button>
<p-button label="home" icon="fa fa-home" iconPos="left">Home</p-button>
Reference