Origami Frontend Components & Services

SassDoc: o-icons active


Get an SVG icon with PNG fallback for ie6-8

parameter type default description
icon-name This should be a reference to an icon included in o-icons eg arrow-down
color This should be a hex colour value. Used to color the icon. We suggest using an o-colors an o-colors function.
container-width This is the width to set the icon containing element to. Defaults to 20px. This value is also used to request a PNG fallback of the right size from the image service.
container-height This is the height to set the icon containing element to. Defaults to null, and will use the value of $container-width
apply-base-styles (optional) true If true, will output style rules for the container. If false will only output the background-image property
apply-width-height (optional) true If true, will output the styles for the container width and height.
iconset-version (optional) 1 At present only 1 version of the icon set is available.
high-contrast-fallback (optional) true To output Microsoft High Contrast fallback for accessibility reasons or not.



Base styles for all icons



Silent mode



Whether SVG icon mixin should use the image service or serve local assets



Option to change the base of the image service url



Option to change the version of the image service url


Switch component view

GitHub Repository

Install o-icons

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

If running a Manual Build, run bower install --save "o-icons@^5.7.1".

Help & Support

o-icons is maintained directly by the Origami team. If you have any questions about o-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