Code Club Style Guide

Icons

Available Icons

The basic icon takes the following form:

<span class="c-icon c-icon--ICON-NAME-HERE"></span>

Where you see "ICON NAME HERE" in the above example, replace that text with one of the following values:


Colouring Icons

Each icon in the above is provided in six colours from our colour palette. The default is shown above, and does not require an additional HTML class to show it. The other colours are as follows:

Example
<span class="c-icon c-icon--star c-icon--green"></span>
<span class="c-icon c-icon--star c-icon--blue"></span>
<span class="c-icon c-icon--star c-icon--red"></span>

Sizing icons

The default icon size is equivalent to 20px in width and height. The following modifiers are available for altering icon sizes:

Example
<span class="c-icon c-icon--star c-icon--x-small"></span>
<span class="c-icon c-icon--star c-icon--small"></span>
<span class="c-icon c-icon--star"></span>
<span class="c-icon c-icon--star c-icon--large"></span>
<span class="c-icon c-icon--star c-icon--x-large"></span>

Combining Colours and Sizes

As you might expect, the classes that control the size and colour of the icons can be mixed up in any combination you like, but remember that you can only specify one colour and one size, otherwise you may end up with unexpected results.

Example
<span class="c-icon c-icon--calendar c-icon--blue c-icon--small"></span>
<span class="c-icon c-icon--projects c-icon--red c-icon--x-large"></span>
<span class="c-icon c-icon--tick-circle c-icon--green"></span>
<span class="c-icon c-icon--video-play c-icon--x-small"></span>
<span class="c-icon c-icon--feedback c-icon--large"></span>