Menu

Iconography

Icons should add clarity or affordance to interface elements and should not be used purely decoratively.

They are generally simple line icons drawn with a 2px stroke, and should fit inside a 24px container.

New icons introduced should be visually consistent with the set pictured here.

Icons add visual noise to designs and should be used sparingly.

Icon ID Code (Nunjucks)
arrow-left {{ icon({ id: arrow-left }) }}
arrow-right {{ icon({ id: arrow-right }) }}
chevron-down {{ icon({ id: chevron-down }) }}
cross {{ icon({ id: cross }) }}
dash {{ icon({ id: dash }) }}
facebook {{ icon({ id: facebook }) }}
file {{ icon({ id: file }) }}
info {{ icon({ id: info }) }}
instagram {{ icon({ id: instagram }) }}
linkedin {{ icon({ id: linkedin }) }}
log-out {{ icon({ id: log-out }) }}
play {{ icon({ id: play }) }}
rss {{ icon({ id: rss }) }}
search {{ icon({ id: search }) }}
tick {{ icon({ id: tick }) }}
twitter {{ icon({ id: twitter }) }}
youtube {{ icon({ id: youtube }) }}

Adding new icons

Adding new icons to the SVG sprite is a manual process.

  1. Create (or copy-paste) your new icon on a 24px × 24px artboard in Illustrator
  2. Export as an SVG
  3. Copy into https://jakearchibald.github.io/svgomg/
    • Adjust the options to best reduce the file size
    • Export from SVGOMG as code
  4. Paste into Franklin's /src/static/svg/sprite.svg
    • Convert the <svg> tag into a <symbol>
    • Add an id attribute
    • Generally ensure your <symbol> looks the same as existing ones

Please remember to add your icon to this page!