Iconography

The AFR library of icons is intended to be used across all of AFR.com. The use of icons purely as a stylistic choice is not recommended, they should be used to aid the user understand a particular call to action. These icons are created as scalable vector graphics (SVG). Using SVG ensures they will look crisp on all devices.

Icons

.icon--alert

.icon--arrow

.icon--arrow-down

.icon--arrow-up

.icon--calendar

.icon--cancel

.icon--chevron-down

.icon--chevron-left

.icon--chevron-right

.icon--close

.icon--comment

.icon--create

.icon--data

.icon--dot

.icon--edit

.icon--ellipsis

.icon--email

.icon--external-link

.icon--facebook

.icon--feedback

.icon--flag

.icon--gallery

.icon--google-plus

.icon--graph

.icon--home

.icon--instagram

.icon--linkedin

.icon--location

.icon--lock

.icon--menu

.icon--paper

.icon--photo

.icon--price

.icon--print

.icon--quote

.icon--save

.icon--saved

.icon--search

.icon--share

.icon--square

.icon--switch

.icon--reddit

.icon--twitter

.icon--url

.icon--video

Sizes

Currently there are three size groups: default (16x16), small (14x14) and large (32x32). If no class is added size will be default. To use small size add .icon--small class; to use large size add .icon--large class.

Colours

Each icon should be bundled into a sprite with a particular colourway. The plan is for icons to be available in grey(sass: $afr-grey), afr blue(sass: $primary-color), $white and $black.

However the social media icons have two colours, grey and the social media’s brand colour for hover/focus.

By default when an icon is added it should display as grey. Below is table documenting how to change an icons colour.

Positions

A description about --before, --after and --beforeafter to be put here.