Icons

Icons can be added via an <i> element like so:

<i class="p-icon--{name}"></i>

Class name
p-icon--plus
p-icon--minus
p-icon--expand
p-icon--collapse
p-icon--collapse
p-icon--spinner
p-icon--chevron
p-icon--close
p-icon--help
p-icon--information
p-icon--help
p-icon--delete
p-icon--external
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

View example of the icon set (light)

When placed within .p-strip--dark, icon colors are reverted to ensure legibility.

View example of the icon set (dark)

Social icons

Class name
p-icon--facebook
p-icon--google
p-icon--twitter
p-icon--instagram
p-icon--linkedin
p-icon--youtube
p-icon--canonical
p-icon--ubuntu

View example of the icon set (Social)

Share icons

If you wish to add share icons for Twitter, Facebook, Google+ or LinkedIn, we recommend using these specific buttons:

  • Twitter - https://dev.twitter.com/web/tweet-button
  • Facebook - https://developers.facebook.com/docs/plugins/share-button/
  • Google+ - https://developers.google.com/+/web/share/](https://developers.google.com/+/web/share/
  • LinkedIn - https://developer.linkedin.com/plugins/share](https://developer.linkedin.com/plugins/share