Platform Icons

Usage

Class

Class
pi-{ icon name }

You get an icon

You can add this class to any empty div. We hijack the deprecated <i> which has become the standard in recent years.

Demo

Markup

<i class="pi-trophy"></i>

Remeber to add the proper aria-label when the icon is a decoration only aria-hidden="true".

Icons

  • pi-angle-down-double
    Copy
  • pi-angle-down
    Copy
  • pi-angle-left
    Copy
  • pi-angle-right
    Copy
  • pi-angle-up
    Copy
  • pi-arrow-down
    Copy
  • pi-arrow-left
    Copy
  • pi-arrow-right
    Copy
  • pi-arrow-solid-down
    Copy
  • pi-arrow-solid-left
    Copy
  • pi-arrow-solid-right
    Copy
  • pi-arrow-solid-up
    Copy
  • pi-arrow-up
    Copy
  • pi-asg
    Copy
  • pi-asterisk
    Copy
  • pi-award
    Copy
  • pi-ban
    Copy
  • pi-bandaid
    Copy
  • pi-bank
    Copy
  • pi-bell-multi
    Copy
  • pi-bell
    Copy
  • pi-binoculars
    Copy
  • pi-bolt
    Copy
  • pi-bomb
    Copy
  • pi-book
    Copy
  • pi-books
    Copy
  • pi-building
    Copy
  • pi-bullhorn
    Copy
  • pi-calculator
    Copy
  • pi-calendar
    Copy
  • pi-chart-bar
    Copy
  • pi-chart-line-down
    Copy
  • pi-chart-line-up
    Copy
  • pi-chart-pie
    Copy
  • pi-check-circle-solid
    Copy
  • pi-check-circle
    Copy
  • pi-check-square-solid
    Copy
  • pi-check-square
    Copy
  • pi-check
    Copy
  • pi-circle-solid
    Copy
  • pi-circle
    Copy
  • pi-city
    Copy
  • pi-clipboard-file
    Copy
  • pi-clipboard
    Copy
  • pi-clock
    Copy
  • pi-cogs
    Copy
  • pi-coin
    Copy
  • pi-collapse
    Copy
  • pi-credit-card-back
    Copy
  • pi-dashboard
    Copy
  • pi-decision
    Copy
  • pi-dollar
    Copy
  • pi-download-cloud
    Copy
  • pi-download
    Copy
  • pi-ear
    Copy
  • pi-edit
    Copy
  • pi-envelope-solid
    Copy
  • pi-envelope
    Copy
  • pi-eye-line
    Copy
  • pi-eye
    Copy
  • pi-facebook-alt
    Copy
  • pi-facebook
    Copy
  • pi-file-add
    Copy
  • pi-file-attachment
    Copy
  • pi-file-award
    Copy
  • pi-file-cabinet
    Copy
  • pi-file-copy
    Copy
  • pi-file-form
    Copy
  • pi-file-image
    Copy
  • pi-file-pdf
    Copy
  • pi-file-sign
    Copy
  • pi-file-text-solid
    Copy
  • pi-file-text
    Copy
  • pi-filter
    Copy
  • pi-flag
    Copy
  • pi-folder-open
    Copy
  • pi-folder
    Copy
  • pi-full-screen
    Copy
  • pi-gavel
    Copy
  • pi-gear
    Copy
  • pi-globe
    Copy
  • pi-handshake
    Copy
  • pi-headset
    Copy
  • pi-help-solid
    Copy
  • pi-help
    Copy
  • pi-hospital-small
    Copy
  • pi-hospital
    Copy
  • pi-house
    Copy
  • pi-id-badge-alt
    Copy
  • pi-id-badge
    Copy
  • pi-info-solid
    Copy
  • pi-info
    Copy
  • pi-instagram
    Copy
  • pi-key
    Copy
  • pi-keyboard-key
    Copy
  • pi-keyboard
    Copy
  • pi-learn
    Copy
  • pi-light-bulb-off
    Copy
  • pi-light-bulb-on
    Copy
  • pi-link-external-small
    Copy
  • pi-link-external
    Copy
  • pi-link
    Copy
  • pi-linkedin
    Copy
  • pi-list-check
    Copy
  • pi-list
    Copy
  • pi-lock-open-solid
    Copy
  • pi-lock-open
    Copy
  • pi-lock-solid
    Copy
  • pi-lock
    Copy
  • pi-login
    Copy
  • pi-logout
    Copy
  • pi-magic-wand
    Copy
  • pi-magnet
    Copy
  • pi-map-marker
    Copy
  • pi-map
    Copy
  • pi-medicare-card
    Copy
  • pi-medicareful
    Copy
  • pi-menu
    Copy
  • pi-merge
    Copy
  • pi-minus
    Copy
  • pi-mouse-pointer
    Copy
  • pi-note-solid
    Copy
  • pi-note
    Copy
  • pi-paper-clip
    Copy
  • pi-paper-plane-solid
    Copy
  • pi-paper-plane
    Copy
  • pi-pause
    Copy
  • pi-pencil
    Copy
  • pi-phone-mobile
    Copy
  • pi-phone
    Copy
  • pi-pill-bottle-alt
    Copy
  • pi-pill-bottle-solid
    Copy
  • pi-pill-bottle
    Copy
  • pi-pills
    Copy
  • pi-pinterest
    Copy
  • pi-platform-ui
    Copy
  • pi-play-circle
    Copy
  • pi-play-monitor
    Copy
  • pi-play
    Copy
  • pi-plug
    Copy
  • pi-plus-circle-solid
    Copy
  • pi-plus-circle
    Copy
  • pi-plus
    Copy
  • pi-podbean
    Copy
  • pi-podcast
    Copy
  • pi-power-off
    Copy
  • pi-power-on
    Copy
  • pi-puzzle-piece
    Copy
  • pi-quill
    Copy
  • pi-radio-button
    Copy
  • pi-redo-clock
    Copy
  • pi-redo
    Copy
  • pi-rimdev-circle
    Copy
  • pi-rimdev
    Copy
  • pi-ritter-circle
    Copy
  • pi-ritter
    Copy
  • pi-rocket
    Copy
  • pi-rx
    Copy
  • pi-save
    Copy
  • pi-search
    Copy
  • pi-share
    Copy
  • pi-shield
    Copy
  • pi-signal-slash
    Copy
  • pi-speech-bubble-multi
    Copy
  • pi-speech-bubble
    Copy
  • pi-square-solid
    Copy
  • pi-square
    Copy
  • pi-star-half
    Copy
  • pi-star
    Copy
  • pi-stethoscope
    Copy
  • pi-suitcase-solid
    Copy
  • pi-suitecase
    Copy
  • pi-sync-clock
    Copy
  • pi-sync
    Copy
  • pi-tag
    Copy
  • pi-text
    Copy
  • pi-ticket
    Copy
  • pi-times-solid
    Copy
  • pi-times
    Copy
  • pi-touch
    Copy
  • pi-trash-solid
    Copy
  • pi-trash
    Copy
  • pi-trophy
    Copy
  • pi-twitter
    Copy
  • pi-universal-access
    Copy
  • pi-upload-cloud
    Copy
  • pi-upload
    Copy
  • pi-user-building
    Copy
  • pi-user-circle
    Copy
  • pi-user-doctor
    Copy
  • pi-user-solid
    Copy
  • pi-user-tie
    Copy
  • pi-user
    Copy
  • pi-users
    Copy
  • pi-variable
    Copy
  • pi-vertical-ellipsis
    Copy
  • pi-warning-circle
    Copy
  • pi-warning
    Copy
  • pi-window-new
    Copy
  • pi-youtube
    Copy
  • pi-printer
    Copy
  • pi-bookmark-solid
    Copy
  • pi-bookmark
    Copy
  • pi-heart-solid
    Copy
  • pi-heart
    Copy
  • pi-mastodon
    Copy
  • pi-shopping-bag
    Copy
  • pi-shopping-cart
    Copy
  • pi-x
    Copy

Sizing

Class

ClassResult
pi-{ xs, sm, lg, xl, xxl }

Alter the size of your icon from .5rem to 3rem.

Demo

Markup

<i class="pi-rocket pi-xs"></i>
<i class="pi-rocket pi-sm"></i>
<i class="pi-rocket"></i>
<i class="pi-rocket pi-lg"></i>
<i class="pi-rocket pi-xl"></i>
<i class="pi-rocket pi-xxl"></i>