This component is deprecated.

This component should not be used for new projects. Only the most severe security-related bugs will be fixed for this component, though existing implementations will continue to work. This page is here for existing users to refer to documentation.

o-ft-icons

Financial Times icons

deprecated

Main

<ul class="demo-examples">
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--arrow-down demo-icon"></i>
		<span class="demo-label">arrow-down</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--arrow-downwards demo-icon"></i>
		<span class="demo-label">arrow-downwards</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--arrow-left demo-icon"></i>
		<span class="demo-label">arrow-left</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--arrow-right demo-icon"></i>
		<span class="demo-label">arrow-right</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--arrow-up-down demo-icon"></i>
		<span class="demo-label">arrow-up-down</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--arrow-up demo-icon"></i>
		<span class="demo-label">arrow-up</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--arrow-upwards demo-icon"></i>
		<span class="demo-label">arrow-upwards</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-always-learning demo-icon"></i>
		<span class="demo-label">brand-always-learning</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-fast-ft demo-icon"></i>
		<span class="demo-label">brand-fast-ft</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-fast demo-icon"></i>
		<span class="demo-label">brand-fast</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-ft-logo-square demo-icon"></i>
		<span class="demo-label">brand-ft-logo-square</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-ft-masthead demo-icon"></i>
		<span class="demo-label">brand-ft-masthead</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-ft demo-icon"></i>
		<span class="demo-label">brand-ft</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-myft demo-icon"></i>
		<span class="demo-label">brand-myft</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--brand-pearson demo-icon"></i>
		<span class="demo-label">brand-pearson</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--clippings demo-icon"></i>
		<span class="demo-label">clippings</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--comment demo-icon"></i>
		<span class="demo-label">comment</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--copy-link demo-icon"></i>
		<span class="demo-label">copy-link</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--cross demo-icon"></i>
		<span class="demo-label">cross</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--email demo-icon"></i>
		<span class="demo-label">email</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--eye demo-icon"></i>
		<span class="demo-label">eye</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--font-size demo-icon"></i>
		<span class="demo-label">font-size</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--gift demo-icon"></i>
		<span class="demo-label">gift</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--hamburger demo-icon"></i>
		<span class="demo-label">hamburger</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--more demo-icon"></i>
		<span class="demo-label">more</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--padlock demo-icon"></i>
		<span class="demo-label">padlock</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--pinterest demo-icon"></i>
		<span class="demo-label">pinterest</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--play demo-icon"></i>
		<span class="demo-label">play</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--plus demo-icon"></i>
		<span class="demo-label">plus</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--printer demo-icon"></i>
		<span class="demo-label">printer</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--profile demo-icon"></i>
		<span class="demo-label">profile</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--pullquote demo-icon"></i>
		<span class="demo-label">pullquote</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--refresh demo-icon"></i>
		<span class="demo-label">refresh</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--search demo-icon"></i>
		<span class="demo-label">search</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-arts demo-icon"></i>
		<span class="demo-label">section-arts</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-blogs demo-icon"></i>
		<span class="demo-label">section-blogs</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-business-education demo-icon"></i>
		<span class="demo-label">section-business-education</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-business-life demo-icon"></i>
		<span class="demo-label">section-business-life</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-columnists demo-icon"></i>
		<span class="demo-label">section-columnists</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-companies demo-icon"></i>
		<span class="demo-label">section-companies</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-ftfm demo-icon"></i>
		<span class="demo-label">section-ftfm</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-house-and-home demo-icon"></i>
		<span class="demo-label">section-house-and-home</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-leader-and-letters demo-icon"></i>
		<span class="demo-label">section-leader-and-letters</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-lex demo-icon"></i>
		<span class="demo-label">section-lex</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-magazine demo-icon"></i>
		<span class="demo-label">section-magazine</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-markets-data demo-icon"></i>
		<span class="demo-label">section-markets-data</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-markets demo-icon"></i>
		<span class="demo-label">section-markets</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-money demo-icon"></i>
		<span class="demo-label">section-money</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-special-report demo-icon"></i>
		<span class="demo-label">section-special-report</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-uk demo-icon"></i>
		<span class="demo-label">section-uk</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--section-world demo-icon"></i>
		<span class="demo-label">section-world</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--settings demo-icon"></i>
		<span class="demo-label">settings</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--share demo-icon"></i>
		<span class="demo-label">share</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--sign-in demo-icon"></i>
		<span class="demo-label">sign-in</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--sign-out demo-icon"></i>
		<span class="demo-label">sign-out</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--single-quote demo-icon"></i>
		<span class="demo-label">single-quote</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--social-email demo-icon"></i>
		<span class="demo-label">social-email</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--social-facebook demo-icon"></i>
		<span class="demo-label">social-facebook</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--social-linkedin demo-icon"></i>
		<span class="demo-label">social-linkedin</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--social-twitter demo-icon"></i>
		<span class="demo-label">social-twitter</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--speechbubble demo-icon"></i>
		<span class="demo-label">speechbubble</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--subscribe demo-icon"></i>
		<span class="demo-label">subscribe</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--thumb-up demo-icon"></i>
		<span class="demo-label">thumb-up</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--tick-thin demo-icon"></i>
		<span class="demo-label">tick-thin</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--tick demo-icon"></i>
		<span class="demo-label">tick</span>
	</li>
	<li class="demo-example">
		<i class="o-ft-icons-icon o-ft-icons-icon--warning demo-icon"></i>
		<span class="demo-label">warning</span>
	</li>
</ul>

<p class="demo-count">66 icons in a web font generated from SVG sources.</p>

Svg

<ul class="demo-examples">
	<li class="demo-example">
		<img class="demo-icon" src="/svg/arrow-down.svg">
		<span class="demo-label">arrow-down</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/arrow-downwards.svg">
		<span class="demo-label">arrow-downwards</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/arrow-left.svg">
		<span class="demo-label">arrow-left</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/arrow-right.svg">
		<span class="demo-label">arrow-right</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/arrow-up-down.svg">
		<span class="demo-label">arrow-up-down</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/arrow-up.svg">
		<span class="demo-label">arrow-up</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/arrow-upwards.svg">
		<span class="demo-label">arrow-upwards</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-always-learning.svg">
		<span class="demo-label">brand-always-learning</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-fast-ft.svg">
		<span class="demo-label">brand-fast-ft</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-fast.svg">
		<span class="demo-label">brand-fast</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-ft-logo-square.svg">
		<span class="demo-label">brand-ft-logo-square</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-ft-masthead.svg">
		<span class="demo-label">brand-ft-masthead</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-ft.svg">
		<span class="demo-label">brand-ft</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-myft.svg">
		<span class="demo-label">brand-myft</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/brand-pearson.svg">
		<span class="demo-label">brand-pearson</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/clippings.svg">
		<span class="demo-label">clippings</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/comment.svg">
		<span class="demo-label">comment</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/copy-link.svg">
		<span class="demo-label">copy-link</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/cross.svg">
		<span class="demo-label">cross</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/email.svg">
		<span class="demo-label">email</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/eye.svg">
		<span class="demo-label">eye</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/font-size.svg">
		<span class="demo-label">font-size</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/gift.svg">
		<span class="demo-label">gift</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/hamburger.svg">
		<span class="demo-label">hamburger</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/more.svg">
		<span class="demo-label">more</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/padlock.svg">
		<span class="demo-label">padlock</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/pinterest.svg">
		<span class="demo-label">pinterest</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/play.svg">
		<span class="demo-label">play</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/plus.svg">
		<span class="demo-label">plus</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/printer.svg">
		<span class="demo-label">printer</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/profile.svg">
		<span class="demo-label">profile</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/pullquote.svg">
		<span class="demo-label">pullquote</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/refresh.svg">
		<span class="demo-label">refresh</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/search.svg">
		<span class="demo-label">search</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-arts.svg">
		<span class="demo-label">section-arts</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-blogs.svg">
		<span class="demo-label">section-blogs</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-business-education.svg">
		<span class="demo-label">section-business-education</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-business-life.svg">
		<span class="demo-label">section-business-life</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-columnists.svg">
		<span class="demo-label">section-columnists</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-companies.svg">
		<span class="demo-label">section-companies</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-ftfm.svg">
		<span class="demo-label">section-ftfm</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-house-and-home.svg">
		<span class="demo-label">section-house-and-home</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-leader-and-letters.svg">
		<span class="demo-label">section-leader-and-letters</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-lex.svg">
		<span class="demo-label">section-lex</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-magazine.svg">
		<span class="demo-label">section-magazine</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-markets-data.svg">
		<span class="demo-label">section-markets-data</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-markets.svg">
		<span class="demo-label">section-markets</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-money.svg">
		<span class="demo-label">section-money</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-special-report.svg">
		<span class="demo-label">section-special-report</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-uk.svg">
		<span class="demo-label">section-uk</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/section-world.svg">
		<span class="demo-label">section-world</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/settings.svg">
		<span class="demo-label">settings</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/share.svg">
		<span class="demo-label">share</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/sign-in.svg">
		<span class="demo-label">sign-in</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/sign-out.svg">
		<span class="demo-label">sign-out</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/single-quote.svg">
		<span class="demo-label">single-quote</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/social-email.svg">
		<span class="demo-label">social-email</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/social-facebook.svg">
		<span class="demo-label">social-facebook</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/social-linkedin.svg">
		<span class="demo-label">social-linkedin</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/social-twitter.svg">
		<span class="demo-label">social-twitter</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/speechbubble.svg">
		<span class="demo-label">speechbubble</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/subscribe.svg">
		<span class="demo-label">subscribe</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/thumb-up.svg">
		<span class="demo-label">thumb-up</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/tick-thin.svg">
		<span class="demo-label">tick-thin</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/tick.svg">
		<span class="demo-label">tick</span>
	</li>
	<li class="demo-example">
		<img class="demo-icon" src="/svg/warning.svg">
		<span class="demo-label">warning</span>
	</li>
</ul>

<p class="demo-count">66 icons in a web font generated from SVG sources.</p>
Bower Dependencies
o-assets >= 0.4.1 <4
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-ft-icons@^3.5.2

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-ft-icons"@"^3.5.2"

For more information see the Origami build process.