Icons

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

View example of icons

Icons as links

If an icon needs to act as a link, p-icon-- classes can instead be applied to <a> elements:

View example of icons as links

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

p-icon--external-link

p-icon--chevron-down

p-icon--chevron-up

p-icon--chevron-left

p-icon--chevron-right

p-icon--menu

p-icon--code

p-icon--copy

p-icon--search

p-icon--share

p-icon--user

p-icon--anchor

p-icon--show

p-icon--hide

p-icon--error-grey

p-icon--success-grey

Dark theme

Our standard icons fully support theming, so when placed in a container with is-dark class name (for example body.is-dark), or when having is-dark class name directly, they will be inverted to ensure legibility.

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

p-icon--external-link

p-icon--chevron-down

p-icon--chevron-up

p-icon--chevron-left

p-icon--chevron-right

p-icon--menu

p-icon--code

p-icon--copy

p-icon--search

p-icon--share

p-icon--user

p-icon--anchor

p-icon--show

p-icon--hide

p-icon--error-grey

p-icon--success-grey

Deprecated

Prior to Vanilla 4.8.0 the dark theme for icons was provided by is-light class name on the icon, or by a container with --dark suffix. This approach is now deprecated and will be removed in future versions of Vanilla. Please use the new theming using is-dark class name.

Deprecated

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

p-icon--information

Additional

Outside of the standard set, additional icons are available for use, and need to be individually imported.

p-icon--applications

p-icon--controllers

p-icon--credit-card

p-icon--fullscreen

p-icon--models

p-icon--machines

p-icon--pin

p-icon--units

p-icon--priority-critical

p-icon--priority-high

p-icon--priority-low

p-icon--priority-medium

p-icon--priority-negligible

p-icon--priority-unknown

p-icon--add-canvas

p-icon--add-logical-volume

p-icon--add-partition

p-icon--back-to-top

p-icon--begin-downloading

p-icon--bundle

p-icon--canvas

p-icon--change-version

p-icon--comments

p-icon--conflict-grey

p-icon--conflict-resolution-grey

p-icon--conflict-resolution

p-icon--conflict

p-icon--connected

p-icon--containers

p-icon--copy-to-clipboard

p-icon--desktop

p-icon--disconnect

p-icon--edit

p-icon--export

p-icon--exposed

p-icon--filter

p-icon--fork

p-icon--get-link

p-icon--halfscreen-bar

p-icon--highlight-off

p-icon--highlight-on

p-icon--home

p-icon--import

p-icon--in-progress

p-icon--inspector-debug

p-icon--loading-steps

p-icon--lock-locked-active

p-icon--lock-locked

p-icon--lock-unlock

p-icon--maximise-bar

p-icon--minimise-bar

p-icon--mount-2

p-icon--mount

p-icon--open-terminal

p-icon--pause

p-icon--plans

p-icon--play

p-icon--pods

p-icon--power-error

p-icon--power-off

p-icon--power-on

p-icon--profile

p-icon--restart

p-icon--revisions

p-icon--security

p-icon--settings

p-icon--sort-both

p-icon--sort-down

p-icon--sort-up

p-icon--starred

p-icon--status-failed-small

p-icon--status-in-progress-small

p-icon--status-in-progress

p-icon--status-queued-small

p-icon--status-queued

p-icon--status-succeeded-small

p-icon--status-waiting-small

p-icon--status-waiting

p-icon--status

p-icon--stop

p-icon--submit-bug

p-icon--switcher-dashboard

p-icon--switcher-environments

p-icon--switcher

p-icon--tag

p-icon--task-outstanding

p-icon--timed-out-grey

p-icon--timed-out

p-icon--topic

p-icon--unit-pending

p-icon--unit-running

p-icon--unmount

p-icon--unstarred

p-icon--user-group

p-icon--video-play

p-icon--warning-grey

p-icon--archive

p-icon--arrow-bottom-left

p-icon--arrow-bottom-right

p-icon--arrow-down

p-icon--arrow-left

p-icon--arrow-right

p-icon--arrow-top-left

p-icon--arrow-top-right

p-icon--arrow-up

p-icon--blueprint

p-icon--book

p-icon--certificate

p-icon--certification

p-icon--cluster-host

p-icon--contact

p-icon--contextual-menu

p-icon--cursor

p-icon--file-blank

p-icon--file

p-icon--folder

p-icon--gift

p-icon--image

p-icon--iso

p-icon--log-out

p-icon--map

p-icon--notifications

p-icon--location

p-icon--private-key

p-icon--profiles

p-icon--repository

p-icon--security-error

p-icon--security-tick

p-icon--security-warning

p-icon--select-add

p-icon--select-remove

p-icon--select

p-icon--single-host

p-icon--snapshot

p-icon--snooze

p-icon--statistics

p-icon--thumbs-down

p-icon--thumbs-up

p-icon--tidy

p-icon--toggle-side-nav

p-icon--turn-off-notification

p-icon--upload

p-icon--usb

p-icon--website

New In Vanilla 4.22.0 we introduced additional icons listed below.

p-icon--heading

p-icon--quote

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

p-icon--rss

p-icon--email

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-plus;
@include vf-p-icon-minus;
@include vf-p-icon-expand;
@include vf-p-icon-collapse;
@include vf-p-icon-spinner;
@include vf-p-icon-drag;
@include vf-p-icon-close;
@include vf-p-icon-help;
@include vf-p-icon-delete;
@include vf-p-icon-external-link;
@include vf-p-icon-chevron;
@include vf-p-icon-menu;
@include vf-p-icon-code;
@include vf-p-icon-copy;
@include vf-p-icon-search;
@include vf-p-icon-share;
@include vf-p-icon-user;
@include vf-p-icon-anchor;
@include vf-p-icon-show;
@include vf-p-icon-hide;
@include vf-p-icon-error-grey;
@include vf-p-icon-success-grey;
@include vf-p-icon-error;
@include vf-p-icon-warning;
@include vf-p-icon-success;
@include vf-p-icon-info;
@include vf-p-icon-facebook;
@include vf-p-icon-instagram;
@include vf-p-icon-twitter;
@include vf-p-icon-linkedin;
@include vf-p-icon-youtube;
@include vf-p-icon-github;
@include vf-p-icon-rss;
@include vf-p-icon-email;

// additional icons
@include vf-p-icon-applications;
@include vf-p-icon-controllers;
@include vf-p-icon-credit-card;
@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-desktop;
@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-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-pause;
@include vf-p-icon-plans;
@include vf-p-icon-play;
@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-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-stop;
@include vf-p-icon-submit-bug;
@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;
@include vf-p-icon-archive;
@include vf-p-icon-arrow-bottom-left;
@include vf-p-icon-arrow-bottom-right;
@include vf-p-icon-arrow-down;
@include vf-p-icon-arrow-left;
@include vf-p-icon-arrow-right;
@include vf-p-icon-arrow-top-left;
@include vf-p-icon-arrow-top-right;
@include vf-p-icon-arrow-up;
@include vf-p-icon-blueprint;
@include vf-p-icon-book;
@include vf-p-icon-certificate;
@include vf-p-icon-certification;
@include vf-p-icon-cluster-host;
@include vf-p-icon-contact;
@include vf-p-icon-contextual-menu;
@include vf-p-icon-cursor;
@include vf-p-icon-file-blank;
@include vf-p-icon-file;
@include vf-p-icon-folder;
@include vf-p-icon-gift;
@include vf-p-icon-image;
@include vf-p-icon-iso;
@include vf-p-icon-log-out;
@include vf-p-icon-map;
@include vf-p-icon-notifications;
@include vf-p-icon-location;
@include vf-p-icon-private-key;
@include vf-p-icon-profiles;
@include vf-p-icon-repository;
@include vf-p-icon-security-error;
@include vf-p-icon-security-tick;
@include vf-p-icon-security-warning;
@include vf-p-icon-select-add;
@include vf-p-icon-select-remove;
@include vf-p-icon-select;
@include vf-p-icon-single-host;
@include vf-p-icon-snapshot;
@include vf-p-icon-snooze;
@include vf-p-icon-statistics;
@include vf-p-icon-thumbs-down;
@include vf-p-icon-thumbs-up;
@include vf-p-icon-tidy;
@include vf-p-icon-toggle-side-nav;
@include vf-p-icon-turn-off-notification;
@include vf-p-icon-upload;
@include vf-p-icon-usb;
@include vf-p-icon-website;

@include vf-p-icon-heading;
@include vf-p-icon-quote;

Customisation

Deprecated

Customisation of icons is not supported by new theming system and is discouraged. We may remove this functionality in future version of Vanilla. Please, whenever possible, use the icons in default colours provided by Vanilla themes.

Should you wish to change the colour of an icon, this can be achieved by using an icon mixin and passing a color as an argument to the mixin.

In the below example, the .p-icon--share class includes the vf-icon-share mixin, and overrides the icon's default $color-mid-dark with $color-dark:

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;

@include vf-p-icons;

.p-icon--share {
  @include vf-icon-share($color-dark);
}

You can find all of the available icon mixins listed here.

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

React

You can use icons in React by installing our react-component library and importing Icon component.

See the documentation for our React Icon component

Icons as links

Standard

Dark theme

Deprecated

Alert

Additional

Social

Share

Import

Customisation

Deprecated

React