Interface Icons

The BigCommerce control panel icon set is based on the open source Google Material Design icon set. It is imported via Bower, and the task gulp icons processes these into our folder structure for distribution and better naming.

With a custom Angular directive we can call the icons as inline elements, which will transclude the raw SVG into the DOM. This allows us to manipulate the SVG with CSS, giving more flexibility than traditional icon fonts.

Standard icons

<icon glyph="ic-clear"></icon>

<icon glyph="ic-local-grocery-store"></icon>

<icon glyph="ic-home"></icon>

SVG icons can be styled by setting stroke and fill properties via CSS. If you require customised versions of basic icons, please clear with the design team first.

Notes:

The glyph attribute specifies which icon you would like, by name, from the list below.

A non-curated list of Google Material Design Icons below (we’ll do better than this soon):