Icons


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

Accessibility

For accessibility purposes, you can add text inside the icon element which will not be displayed to the user. E.g.

<i class"p-icon--contextual-menu">This text will not be displayed</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--drag

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

p-icon--anchor

p-icon--question

Dark theme

Our dark-themed icons are available when placed within .p-strip--dark, icon colors are reverted to ensure legibility as shown in our example.

Alternatively to use light version of icons outside of the dark strip, add is-light class to the icon element (e.g. p-icon--plus is-light).

p-icon--plus

p-icon--external-link

p-icon--search

Alert

Our alert icons are used to indicate the status of a message in a notification.

p-icon--error

p-icon--warning

p-icon--success

Social

Our social icons are used to drive users to social content.

p-icon--facebook
p-icon--instagram
p-icon--twitter
p-icon--linkedin
p-icon--youtube
p-icon--rss
p-icon--email
Deprecated We will be removing p-icon--canonical and p-icon--ubuntu from our social icon set, they will no longer be available from our future release v3.0.

Share

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

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_icons';

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

Design

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