Icons
Updated
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--chevron-down">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--chevron-down
p-icon--chevron-up
p-icon--menu
p-icon--code
p-icon--copy
p-icon--search
p-icon--share
p-icon--user
p-icon--anchor
Deprecated The .p-icon--question
class has been deprecated and will be removed in version 3.0. Use class .p-icon--help
instead. We will also be removing p-icon--contextual-menu
, please use p-icon--chevron-down
instead.
Dark theme
Our dark-themed icons are available when placed within a container that has the suffix --dark
ex) help-container--dark
. Icon colors will then be inverted 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
Additional
Outside of the standard set, additional icons are available for use, and need to be individually imported.
Social
Our social icons are used to drive users to social content.
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';
@include vf-p-icons;
// for spin animation on the spinner icon you need to include animations utility
@import 'utilities_animations';
@include vf-u-animations;
The additional set of icons is not included in Vanilla by default, if you require them you can add them to your project, as in the example below.
@import 'patterns_icons';
@include vf-p-icon-status-waiting;
@include vf-p-icon-user-group;
@include vf-p-icon-video-play;
@include vf-p-icon-warning-grey;
If you use a limited set of icons you may want to include them individually to reduce the size of your CSS file.
@import 'patterns_icons';
// include common styles shared by all icons
@include vf-p-icons-common;
// include only the icons that you use in your project
@include vf-p-icon-anchor;
@include vf-p-icon-plus;
@include vf-p-icon-minus;
@include vf-p-icon-expand;
@include vf-p-icon-collapse;
@include vf-p-icon-chevron;
@include vf-p-icon-close;
@include vf-p-icon-help;
@include vf-p-icon-info;
@include vf-p-icon-delete;
@include vf-p-icon-error;
@include vf-p-icon-warning;
@include vf-p-icon-external-link;
@include vf-p-icon-drag;
@include vf-p-icon-code;
@include vf-p-icon-menu;
@include vf-p-icon-copy;
@include vf-p-icon-search;
@include vf-p-icon-success;
@include vf-p-icon-share;
@include vf-p-icon-user;
@include vf-p-icon-question;
@include vf-p-icon-spinner;
@include vf-p-icon-facebook;
@include vf-p-icon-twitter;
@include vf-p-icon-instagram;
@include vf-p-icon-linkedin;
@include vf-p-icon-youtube;
@include vf-p-icon-canonical;
@include vf-p-icon-ubuntu;
@include vf-p-icon-rss;
@include vf-p-icon-email;
@include vf-p-icon-sizes;
@include vf-p-icon-in-button;
// additional icons
@include vf-p-icon-applications;
@include vf-p-icon-controllers;
@include vf-p-icon-fullscreen;
@include vf-p-icon-models;
@include vf-p-icon-machines;
@include vf-p-icon-pin;
@include vf-p-icon-units;
@include vf-p-icon-priority-critical;
@include vf-p-icon-priority-high;
@include vf-p-icon-priority-low;
@include vf-p-icon-priority-medium;
@include vf-p-icon-priority-negligible;
@include vf-p-icon-priority-unknown;
@include vf-p-icon-add-canvas;
@include vf-p-icon-add-logical-volume;
@include vf-p-icon-add-partition;
@include vf-p-icon-back-to-top;
@include vf-p-icon-begin-downloading;
@include vf-p-icon-bundle;
@include vf-p-icon-canvas;
@include vf-p-icon-change-version;
@include vf-p-icon-comments;
@include vf-p-icon-conflict-grey;
@include vf-p-icon-conflict-resolution-grey;
@include vf-p-icon-conflict-resolution;
@include vf-p-icon-conflict;
@include vf-p-icon-connected;
@include vf-p-icon-containers;
@include vf-p-icon-copy-to-clipboard;
@include vf-p-icon-disconnect;
@include vf-p-icon-edit;
@include vf-p-icon-export;
@include vf-p-icon-exposed;
@include vf-p-icon-filter;
@include vf-p-icon-fork;
@include vf-p-icon-get-link;
@include vf-p-icon-halfscreen-bar;
@include vf-p-icon-hide;
@include vf-p-icon-highlight-off;
@include vf-p-icon-highlight-on;
@include vf-p-icon-home;
@include vf-p-icon-import;
@include vf-p-icon-in-progress;
@include vf-p-icon-inspector-debug;
@include vf-p-icon-loading-steps;
@include vf-p-icon-lock-locked-active;
@include vf-p-icon-lock-locked;
@include vf-p-icon-lock-unlock;
@include vf-p-icon-maximise-bar;
@include vf-p-icon-minimise-bar;
@include vf-p-icon-mount-2;
@include vf-p-icon-mount;
@include vf-p-icon-open-terminal;
@include vf-p-icon-plans;
@include vf-p-icon-pods;
@include vf-p-icon-power-error;
@include vf-p-icon-power-off;
@include vf-p-icon-power-on;
@include vf-p-icon-profile;
@include vf-p-icon-restart;
@include vf-p-icon-revisions;
@include vf-p-icon-security;
@include vf-p-icon-settings;
@include vf-p-icon-show;
@include vf-p-icon-sort-both;
@include vf-p-icon-sort-down;
@include vf-p-icon-sort-up;
@include vf-p-icon-starred;
@include vf-p-icon-status-failed-small;
@include vf-p-icon-status-in-progress-small;
@include vf-p-icon-status-in-progress;
@include vf-p-icon-status-queued-small;
@include vf-p-icon-status-queued;
@include vf-p-icon-status-succeeded-small;
@include vf-p-icon-status-waiting-small;
@include vf-p-icon-status-waiting;
@include vf-p-icon-status;
@include vf-p-icon-submit-bug;
@include vf-p-icon-success-grey;
@include vf-p-icon-switcher-dashboard;
@include vf-p-icon-switcher-environments;
@include vf-p-icon-switcher;
@include vf-p-icon-tag;
@include vf-p-icon-task-outstanding;
@include vf-p-icon-timed-out-grey;
@include vf-p-icon-timed-out;
@include vf-p-icon-topic;
@include vf-p-icon-unit-pending;
@include vf-p-icon-unit-running;
@include vf-p-icon-unmount;
@include vf-p-icon-unstarred;
@include vf-p-icon-user-group;
@include vf-p-icon-video-play;
@include vf-p-icon-warning-grey;
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.