Origami Frontend Components & Services

Readme: fticons active

Build status

This is the (new) icon set for FT websites. It replaces the assets in o-icons.

The 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 DPR of 1 (non-retina screens).

Index

Usage

You can use fticons in the following ways:

  1. You can access them directly from the Image Service, eg https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:podcast?source=test
  2. There is also an Origami component that wraps this icon set: o-icons. As with all Origami components, you can use o-icons with the Build Service, or as an installable component. See the o-icons README for more information.

Creating or modifying new icons

Please check out our contributing guide for design and development guidelines for adding or modifying icons.

SVG icons GOTCHAs

My icons are blurry!

All of our icons are vectors. At small sizes, the process of converting a vector to a bitmap (rasterization) will leave you with with blurry icons. All of the icons in fticons have been drawn to map precisely to a 40x40px grid. If you need to use these at a smaller or larger size, they may appear fuzzy as the browser tries to anti-alias them.

I'm exporting my icons at 40px and they should work but they're still fuzzy!

Sometimes sketch will export icons with rounding errors, so if you think you're exporting them on the correct grid and they're still blurry, open the source and look if the path points are values like 372.00000001. The fix for this is to either:

When I convert my icons to PNG, they're blurry!

This will happen if the source SVG is smaller than the size you're converting to. This is because the Image Service converts the format first and then resizes, resulting in blurriness.
The solution is to make sure your source SVGs have a width and height bigger than the size they're likely to be used at.

My icon is not converting to a PNG properly

If your icon has a clipPath in it, then with v1 of the Image Service, it may not render properly. Usuallt it will look like the clipPath isn't there. To fix this you'll need to redraw your icon without the clipPath.

Migrating from o-icons assets

If you were using the old o-icons assets, some things have changed in this new set.

The whitespace around icons has now been standardised. This means that some of the padding may have changed, so if your code inserts and icon to line up with some other stuff, you should check that still works, you may need to adjust it.

Removed

The following icons no longer exist:

Renamed

What happened to o-icons

o-icons still exists, and provides Sass mixins to use icons with. In order to properly version the icon set we've moved it to it's own repo (this one). This means we can do major releases of o-icons Sass without needing to bump the icon set (which can be accessed independently of o-icons via the Image Service.)


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Include images in your project

Images from "fticons" can be loaded directly using the Image Service.

To load an image from this image set, use the following Image Service URL:

https://www.ft.com/__origami/service/image/v2/images/raw/fticon-v1:{image-name}?source={your-source-here}

See the Image Service documentation for more.

Download images

To add images to your project we recommend using the Image Service. However you may download the full image set using the button below. It will download the Github repository, with all the image files in a sub folder.

Download the Imageset
Add/update an image

To request a new image, or to change an existing image, please create an issue on Github. For support please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com

Support Details

Slack: #ft-origami
Email: origami.support@ft.com