Origami Frontend Components & Services

Demos: o-icons

Icons

All icons available via o-icons.

<ul class="demo-examples">
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--arrow-down demo-icon"></span>
		<span class="demo-label">arrow-down</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--arrow-left demo-icon"></span>
		<span class="demo-label">arrow-left</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--arrow-right demo-icon"></span>
		<span class="demo-label">arrow-right</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--arrow-up demo-icon"></span>
		<span class="demo-label">arrow-up</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--arrows-left-right demo-icon"></span>
		<span class="demo-label">arrows-left-right</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--arrows-up-down demo-icon"></span>
		<span class="demo-label">arrows-up-down</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--audio demo-icon"></span>
		<span class="demo-label">audio</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--book demo-icon"></span>
		<span class="demo-label">book</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--bookmark-outline demo-icon"></span>
		<span class="demo-label">bookmark-outline</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--bookmark demo-icon"></span>
		<span class="demo-label">bookmark</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--circle demo-icon"></span>
		<span class="demo-label">circle</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--corporate demo-icon"></span>
		<span class="demo-label">corporate</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--cross demo-icon"></span>
		<span class="demo-label">cross</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--dollar demo-icon"></span>
		<span class="demo-label">dollar</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--download demo-icon"></span>
		<span class="demo-label">download</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--edit demo-icon"></span>
		<span class="demo-label">edit</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--first demo-icon"></span>
		<span class="demo-label">first</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--gift demo-icon"></span>
		<span class="demo-label">gift</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--grid demo-icon"></span>
		<span class="demo-label">grid</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--hamburger demo-icon"></span>
		<span class="demo-label">hamburger</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--info demo-icon"></span>
		<span class="demo-label">info</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--ipad demo-icon"></span>
		<span class="demo-label">ipad</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--last demo-icon"></span>
		<span class="demo-label">last</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--link demo-icon"></span>
		<span class="demo-label">link</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--list demo-icon"></span>
		<span class="demo-label">list</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--lock demo-icon"></span>
		<span class="demo-label">lock</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--mail demo-icon"></span>
		<span class="demo-label">mail</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--minus demo-icon"></span>
		<span class="demo-label">minus</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--more demo-icon"></span>
		<span class="demo-label">more</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--mute-notifications demo-icon"></span>
		<span class="demo-label">mute-notifications</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--mute demo-icon"></span>
		<span class="demo-label">mute</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--newspaper demo-icon"></span>
		<span class="demo-label">newspaper</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--notifications demo-icon"></span>
		<span class="demo-label">notifications</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--outside-page demo-icon"></span>
		<span class="demo-label">outside-page</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--pause demo-icon"></span>
		<span class="demo-label">pause</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--phone demo-icon"></span>
		<span class="demo-label">phone</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--pin demo-icon"></span>
		<span class="demo-label">pin</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--play demo-icon"></span>
		<span class="demo-label">play</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--plus demo-icon"></span>
		<span class="demo-label">plus</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--podcast demo-icon"></span>
		<span class="demo-label">podcast</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--print demo-icon"></span>
		<span class="demo-label">print</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--refresh demo-icon"></span>
		<span class="demo-label">refresh</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--search demo-icon"></span>
		<span class="demo-label">search</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--series demo-icon"></span>
		<span class="demo-label">series</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--settings demo-icon"></span>
		<span class="demo-label">settings</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--share demo-icon"></span>
		<span class="demo-label">share</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--skip-backward-30 demo-icon"></span>
		<span class="demo-label">skip-backward-30</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--skip-forward-30 demo-icon"></span>
		<span class="demo-label">skip-forward-30</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--speech-left demo-icon"></span>
		<span class="demo-label">speech-left</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--speech-right demo-icon"></span>
		<span class="demo-label">speech-right</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--speech demo-icon"></span>
		<span class="demo-label">speech</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--stop demo-icon"></span>
		<span class="demo-label">stop</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--tick demo-icon"></span>
		<span class="demo-label">tick</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--trash demo-icon"></span>
		<span class="demo-label">trash</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--upload demo-icon"></span>
		<span class="demo-label">upload</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--user demo-icon"></span>
		<span class="demo-label">user</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--users demo-icon"></span>
		<span class="demo-label">users</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--video demo-icon"></span>
		<span class="demo-label">video</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--warning-alt demo-icon"></span>
		<span class="demo-label">warning-alt</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--warning demo-icon"></span>
		<span class="demo-label">warning</span>
	</li>
	<li class="demo-example">
		<span class="o-icons-icon o-icons-icon--written-text demo-icon"></span>
		<span class="demo-label">written-text</span>
	</li>
</ul>

Custom Icons

Example customised icons generated using o-icons Sass.

<ul class="demo-examples">
	<li class="demo-example">
        <span class="demo-icon-custom"></span>
        <span class="demo-label">lock</span>
	</li>
	<li class="demo-example">
        <span class="demo-icon-custom-color"></span>
        <span class="demo-label">lock tinted</span>
	</li>
	<li class="demo-example">
        <span class="demo-icon-custom-color-resized"></span>
        <span class="demo-label">lock resized and tinted</span>
	</li>
</ul>
Switch component view

GitHub Repository

Install o-icons

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

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

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