Prime Icons list | primeng primeReact,PrimeVue icons list


primeicons icons list npm

primeicons tutorials

pi pi-icon attribute used to display primeicons on the web applications. prime icons can be used in HTML content using iorspan` 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 it any web or mobile pages by configuring CSS files.

all the prime icons are available in the single CSS file.  primeicons are already hosted in CDN network, All you need to is to add primeicons cdn URL in using the link tag

 important points about prime icons.  - It supports all 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 pi-spin class attribute. pi-spin makes the icon rotate in infinite times.

This will not work with adding pi-spin to the class attribute of the icon.

All you have to install angular animation  module in your applications Please install the module using  @angular/animations npm command.

npm install @angular/animations --save

here is an example for 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 angualr, reactJs and Vuejs

npm install primeicons --save
yarn install primeicons

This installs primeicons dependencies to npm application.

In your applicaiton, One time setup is to configure 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 are 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,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 below steps you are followed

  • Install 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 icon attribute, positions also can be configured using 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

Similar Posts