Vanilla framework documentation

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--spinner
p-icon--chevron
p-icon--close
p-icon--help
p-icon--information
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:


### Design