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 }) }} |
|
chevron-up |
{{ icon({ id: chevron-up }) }} |
|
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 }) }} |
|
lock |
{{ icon({ id: lock }) }} |
|
log-out |
{{ icon({ id: log-out }) }} |
|
monitor |
{{ icon({ id: monitor }) }} |
|
pin |
{{ icon({ id: pin }) }} |
|
play |
{{ icon({ id: play }) }} |
|
rss |
{{ icon({ id: rss }) }} |
|
search |
{{ icon({ id: search }) }} |
|
shopping-cart |
{{ icon({ id: shopping-cart }) }} |
|
tick |
{{ icon({ id: tick }) }} |
|
twitter |
{{ icon({ id: twitter }) }} |
|
warning |
{{ icon({ id: warning }) }} |
|
youtube |
{{ icon({ id: youtube }) }} |
Adding new icons
Adding new icons to the SVG sprite is a manual process.
- Create (or copy-paste) your new icon on a 24px × 24px artboard in Illustrator
- Export as an SVG
- Copy into https://jakearchibald.github.io/svgomg/
- Adjust the options to best reduce the file size
- Export from SVGOMG as code
- 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!