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 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

<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/[email protected]/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

#pi-icon category list file

#pi-icon List Category-audio video

#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

• Primeng documentation🔗