{

Prime Icons list | primeng primeReact, PrimeVue icons list


primeicons icons list npm

primeicons tutorials

pi pi-icon attribute is used to display primeicons on web applications. prime icons can be used in HTML content using theiorspan` 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

pi-thumbs-up
pi-thumbs-up

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

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


Default size
font-size is 2em

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.

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

style.css
1
2
3
@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.

angular.json
1
2
3
4
5
6
"styles": [
  "styles.css",
  "../node_modules/primeicons/primeicons.css",
  "../node_modules/primeng/resources/themes/nova-dark/theme.css",
  "../node_modules/primeng/resources/primeng.min.css"
],

Configure CSS files like normal files in index.html, so that it is available across all pages.

index.html
1
2
3
<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>
<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

app.module.ts
1
2
3
4
5
6
7
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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.