FT icons have been designed to work best at 40px width and height. At this size they align precisely with the pixel grid and do not appear blurry on screens with a Device Pixel Ratio of 1 (non-retina screens).
Finding an icon
- All icon SVGs available are listed in the Origami Image Service. Use the Origami Image Service URL Builder to get a URL to embed the icon into a digital product, alternatively download a coy of the SVG.
- Designers can also use the FT UI Library access icons when designing.
- Web engineers should use the o-icons Origami component to include icons in their project.
Creating a new icon
Many applications use icons in different contexts so it's important to get feedback before adding new ones. If there is not an existing icon to meet your needs and you would like to create a new icon please raise in the #design-system-guild Slack channel for feedback. When we've decided to create a new icon it must meet a number of design and technical criteria:
- Icons must be a single colour (black)
- Icons must be square
- Icons must meet a need that is not already met by a pre-existing icon
- Icons should be suitable for reuse in more than 1 application
- Icons should align to a 40x40 pixel grid, with 10px padding on each side
- Icons should be a solid shape rather than outlines where possible
- Icons should have a minimum line thickness of 2px (including negative space thickness)
- Icons should have square rather than rounded corners where suitable
- Icons must meet technical criteria and naming conventions. The Origami team can help make sure these are met.