Origami Frontend Components & Services

Readme: o-ft-icons

o-ft-icons has a support status of "dead". This means that there are no plans to fix any issues with this component, and it may stop working at any point. More information on the status of this component is available in the README. If you still rely on this component or have concerns, please contact the Origami team.

This module is now deprecated, please use o-icons instead.

Icon font with helper classes, and resolution-independent SVG icons to load via the responsive image service.

Quick start

<!-- Load web fonts with @font-face declarations  -->
<link rel="stylesheet" href="//build.origami.ft.com/v2/bundles/css?modules=o-ft-icons@^2.0.0" />

<!-- In your markup, use the helper classes, such as: -->
<i class="o-ft-icons-icon o-ft-icons-icon--arrow-down"></i>

Complete list of available icons

Advanced usage

There are multiple ways to use the icons:

  1. Using the CSS helper classes
  2. Extending the predefined Sass placeholders into your own CSS classes
  3. Resolution independent SVGs, using the responsive image service

1. Using the CSS helper classes

// public/bundle.scss

$o-ft-icons-is-silent: false;
@import "o-ft-icons/main";
<!-- In your markup, use the helper classes, such as: -->
<i class="o-ft-icons-icon o-ft-icons-icon--columnists"><i>

2. Extending the predefined Sass placeholders into your own CSS classes

// public/bundle.scss

@import "o-ft-icons/main";

// Load the webfont that contains all icons as glyphs
@include oFtIconsFontFace();

.icon-columnists {
    // Base icon styles
    @include oFtIconsBaseIconStyles();

    // Extend icon styles
    @extend %o-ft-icons-icon--columnists;
<i class="icon-columnists"></i>

3. Resolution independent SVGs, using the image service

The responsive image service helps serving resolution-independent SVG icons with a resized PNG fallback:

element {
    display: inline-block;
    width: 100px;
    height: 100px;

    // Older browsers: PNG fallback (resized to 100px wide)
    background-image: url('//image.webservices.ft.com/v1/images/raw/fticon:tick?width=100&format=png&source=my-product');

    // Modern browsers: SVG covering the whole size of the element
    // we declare multiple backgrounds so that only modern browsers read this property
    background-image: url('//image.webservices.ft.com/v1/images/raw/fticon:tick?format=svg&source=my-product'), none;
    background-size: cover;

We provide a mixin to make this easier which is documented in Sassdoc http://registry.origami.ft.com/components/o-ft-icons#docs-css.

Add / edit icons, build the web font and demo page

warning Fontforge is notoriously flaky at the moment. We are planning to deprecate its use shortly so if you need to make a minor amendment and these steps don't work for you first time, it might be worth getting someone who has fontforge working on their machine already to make the change. If you really want to try and get this running on your machine and it's giving you trouble, a gist of the steps I tried is here: https://gist.github.com/alicebartlett/1e785aa6a9baa8876d3f

  1. Install the following:

  2. Clone the repository and install dependencies:

    git clone https://github.com/Financial-Times/o-ft-icons.git
    cd o-ft-icons
    obt install
  3. Add or edit an SVG file to the svg folder (see SVG file naming rules).

  4. Generate the web font from the SVG sources:

  5. Check the rendering locally (on http://localhost:8080/demos/local):

    obt demo --runServer
  6. Before publishing your work, generate the component's demos:

    obt demo

SVG version

The icons module uses SVG version 1.1. Files can be created in any vector graphics software. In Adobe Illustrator use the "save as" function and set to version 1.1

SVG file naming rules

The file must be named according to the following rules:

  1. All lower case
  2. Contains only letters, numbers and hyphens (no spaces)
  3. Ends with .svg

Good: columnists.svg, back-arrow.svg
Bad: RightArrow.svg, linked_in.svg, yahoo!.svg

IE7 support

IE7 support is handled by an IE7 CSS expression hack, which is bundled into the main icons mixin.


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

dead Origami v1 (Bower)
Switch component view

GitHub: o-ft-icons

Install o-ft-icons

If using the Build Service, add o-ft-icons@^3.5.3 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-ft-icons@^3.5.3".

Help & Support

o-ft-icons is maintained directly by the Origami team. If you have any questions about o-ft-icons or Origami in general, we are happy to help. 😊

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

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

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