Font Icons

Font icons provide an easy, scalable alternative to image sprites. These icons are collaboratively designed by the Brand, UX, and Web teams.

Available icons

We've developed an icon font for symbols using Fontello, an easy-to-use icon to webfont library. Don't see the icon you need? Send an email to suit@sonos.com and we'll add it.

<span class="icon-help-circled"></span>
<span class="icon-basket"></span>
<span class="icon-cog"></span>
<span class="icon-clipboard"></span>
<span class="icon-email"></span>
<span class="icon-rss"></span>
<span class="icon-location"></span>
<span class="icon-youtube-play"></span>
<span class="icon-play"></span>
<span class="icon-right-dir"></span>
<span class="icon-left-dir"></span>
<span class="icon-up-dir"></span>
<span class="icon-down-dir"></span>
<span class="icon-left-open-big"></span>
<span class="icon-right-open-big"></span>
<span class="icon-gplus"></span>
<span class="icon-facebook"></span>
<span class="icon-linkedin"></span>
<span class="icon-pinterest"></span>
<span class="icon-twitter"></span>
<span class="icon-instagram"></span>
<span class="icon-qq"></span>
<span class="icon-blogger"></span>
<span class="icon-windows"></span>
<span class="icon-apple"></span>
<span class="icon-android"></span>
<span class="icon-ok"></span>
<span class="icon-alarm"></span>
<span class="icon-arrow-left"></span>
<span class="icon-arrow-right"></span>
<span class="icon-arrow-ne"></span>
<span class="icon-arrow-sw"></span>
<span class="icon-contact"></span>
<span class="icon-documentation"></span>
<span class="icon-faq"></span>
<span class="icon-ellipsis"></span>
<span class="icon-ipad"></span>
<span class="icon-iphone"></span>
<span class="icon-library"></span>
<span class="icon-play-in-circle"></span>
<span class="icon-radio"></span>
<span class="icon-tracks"></span>
<span class="icon-x"></span>
<span class="icon-play-1"></span>
<span class="icon-deezer-logo"></span>
<span class="icon-plus"></span>
<span class="icon-plus-circled"></span>
<span class="icon-cancel-circled"></span>
<span class="icon-star"></span>
<span class="icon-lr"></span>
<span class="icon-humidity"></span>
<span class="icon-wall-mount"></span>
<span class="icon-stereo-pair"></span>
<span class="icon-multiple-orientations"></span>
<span class="icon-line-in"></span>
<span class="icon-weibo"></span>
<span class="icon-arrows"></span>
<span class="icon-volume"></span>
<span class="icon-search"></span>
<span class="icon-wifi"></span>
<span class="icon-bluetooth"></span>
<span class="icon-cogs"></span>
<span class="icon-speech-bubble"></span>
<span class="icon-notice"></span>
<span class="icon-download"></span>
<span class="icon-sliders"></span>
<span class="icon-plus-1"></span>
<span class="icon-minus"></span>
<span class="icon-account"></span>
<span class="icon-account-on"></span>
<span class="icon-arrow-down"></span>
<span class="icon-arrow-up"></span>
<span class="icon-arrow-left"></span>
<span class="icon-arrow-right"></span>
<span class="icon-cart"></span>
<span class="icon-chat"></span>
<span class="icon-hamburger"></span>
<span class="icon-hamburger-on"></span>
<span class="icon-contents"></span>
<span class="icon-amplifiers"></span>
<span class="icon-bass-treble"></span>
<span class="icon-dimensions"></span>
<span class="icon-ethernet"></span>
<span class="icon-finish"></span>
<span class="icon-line-in-1"></span>
<span class="icon-microphones"></span>
<span class="icon-power"></span>
<span class="icon-touch"></span>
<span class="icon-tweeters"></span>
<span class="icon-weight"></span>
<span class="icon-wifi-1"></span>
<span class="icon-woofers"></span>
<span class="icon-tv"></span>
<span class="icon-app"></span>
<span class="icon-buttons-lights"></span>
<span class="icon-cloud-download"></span>
<span class="icon-contents-power"></span>
<span class="icon-home-music"></span>
<span class="icon-threaded-mount"></span>
<span class="icon-dashboard-gauge"></span>
<span class="icon-calendar"></span>
<span class="icon-fb-messenger"></span>
<span class="icon-call"></span>
<span class="icon-question-mark"></span>
<span class="icon-mic"></span>
<span class="icon-data"></span>
<span class="icon-airplay-old-01"></span>

Styling Icons

Font icons are just regular text, so you can style the font icons with CSS properties like text-shadow and color.

color: #f00;
font-size: 40px;
text-shadow: 1px 1px 0 wheat;

With Buttons

You can also combine font icons with buttons to create a call to action button. Read more about call to action buttons on the buttons page.

<a href="#" class="button cta transparent">.button.cta<span class="icon-right-dir"></span></a>
.button.cta

Wordmarks

A wordmark, word mark or logotype is usually a distinct text-only typographic treatment of the name of a company, institution, or product name used for purposes of identification and branding.

<span class="icon-iphone-wordmark"></span>
<span class="icon-ipad-wordmark"></span>
<span class="icon-beta-wordmark"></span>
<span class="icon-ios-wordmark"></span>