The use of icons avoids clutter and wording. It says instantly what the user needs to do. They are useful but like images or photography, they are open to being inconsistent or not in keeping with the brand without care.
These are the four main characteristics of an icon that is in fitting with Fairfax & favor. Naturally colours and any wording accompanying the icon should follow the guidelines within their respective section.
The do not's are using heavy or chunky icons, using anything that isn't at least large enough for retina or high-def displays.
Wherever possible, icons will be custom designed to fit and will be saved as SVG format to be infinitely scalable and zero loss of quality.
Below you will find the grid of icons we use throughout the website. The top level are SVGS. The second level are using FontAwesome.
Click any of the SVGs to open the graphic in a new tab. Right click to save the SVG. To view or copy the SVG code/markup, open in a new tab and right-click 'view source'.
SVGs can be changed in linework colour (hover first three as example). Background colours can be changed by altering the container it is sat within. A combination of both can easily be applied (hover last two as example).
An SVG will natively take up the full size of anything it's sat within - the entire browser window if it's not sat within anything. There is no limit to what size you wish to use.
Examples
The usage can be followed by visiting the FontAwesome website. Below are the main icons we use through the website.
Standard Icons
Brand Icons