Icons


Icons provide visual context and enhance usability, they can be added via an <i> element like so: <i class="p-icon--{name}"></i>

Standard

Our icons have two predefined color styles: light and dark. The light variant is the default style.

p-icon--plus

p-icon--minus

p-icon--expand

p-icon--collapse

p-icon--spinner

p-icon--chevron

p-icon--close

p-icon--help

p-icon--information

p-icon--delete

p-icon--external-link

p-icon--contextual-menu

p-icon--menu

p-icon--code

p-icon--copy

p-icon--search

p-icon--share

p-icon--user

p-icon--question

p-icon--error

p-icon--success

p-icon--warning

Standard dark

Our dark style of icons available when placed within .p-strip--dark, icon colors are reverted to ensure legibility.

p-icon--plus

p-icon--minus

p-icon--expand

p-icon--collapse

p-icon--spinner

p-icon--chevron

p-icon--close

p-icon--help

p-icon--information

p-icon--delete

p-icon--external-link

p-icon--contextual-menu

p-icon--menu

p-icon--code

p-icon--copy

p-icon--search

p-icon--share

p-icon--user

p-icon--question

p-icon--error

p-icon--success

p-icon--warning

Animation

Add a spin animation to an element with the following utility class.

View example of the spin animation utility

Social

p-icon--facebook
p-icon--instagram
p-icon--twitter
p-icon--linkedin
p-icon--youtube
p-icon--canonical
p-icon--ubuntu

Share

If you wish to add share icons for Twitter, Facebook, Google+ or LinkedIn, we recommend using the networks’ official buttons:

Design

For more information view the icons design spec which includes the specification in markdown format and a PNG image.