Iconography

The use of icons are to help visually represent what to do, or to indicate the context of something at a glance.

In Fairfax & Favor, we use icons purposefully and with caution. Too many icons together create visual noise and confusion, using icons solely for decoration or visual interest detracts from their intention elsewhere, the use must be justified.

With the exception of a few universally recognised icons, such as the magnify glass, we rarely use icons without supporting or explanatory labels. On mobile, Where space is a premium, we may hide a label but only where the icon is widely recognised, e.g. the shopping bag icon: on desktop the label reads 'BAG', for mobile we use just the icon.

CUSTOM SVGs

The icons in Fairfax & Favor are designed with our brand personality baked in, aiming to balance our style with function. Just like the unique and distinctive products in the website, the icons are custom made, as scalable vector graphics (SVGs) for uncompromised quality regardless of size and position.

Other icons used are all sourced from the FontAwesome library , and typically the light version which compliments the lightweight SVGs created exclusively for Fairfax & Favor.

NAVIGATION

With exception of the X to close icon, these custom SVGs are only used once.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 35.8 35.8" class="w-5 h-5 transition duration-300">
	<polygon class="fill-current group-hover:text-sg-gold" points="35.8,1.8 34.1,0 17.9,16.1 1.8,0 0,1.8 16.1,17.9 0,34.1 1.8,35.8 17.9,19.7 34.1,35.8 35.8,34.1 19.7,17.9"></polygon>
</svg>

DIRECTIONAL ICONS

These are most commonly used to indicate movement, either instantly in the page (e.g for carousels) or moving backwards or forwards to the previous or next piece of content.

We show the FontAwesome classes below as these are commonly using icons.