Use rating icons

Sonos apps use ratings icons as buttons for listeners to rate tracks and streams. These buttons reflect the state of the listener-chosen rating.

First, determine the type of ratings you plan to offer. Sonos supports only one or two icons being displayed at once. However, each icon can have an unlimited number of states, for example, on a single icon star rating, you could offer three states: starred, semi-starred, or unstarred. A double icon implementation could be expressed as one thumbs-up rating and one thumbs-down rating, each with two states: selected or not selected. Sonos suggests three states, no rating, like, or dislike. See the rest of this tutorial for details.

Suggested ratings icons

Sonos offers default icons that cover many of the common scenarios for use in your configuration. Sonos hosts these images on a CDN with edge caching. We recommend that you use these for the best user experience. Simply use their URLs in your Icon configuration nodes. See Configure ratings for details. Alternatively, you can create and host your own rating icons. See below for details.

Icon URL
Love - Unselected
Love - Selected
Star - Unselected
Star - Selected
Thumbs Down - Unselected
Thumbs Down - Selected
Thumbs Up - Unselected
Thumbs Up - Selected

Create your own ratings icons (advanced)

Use the guidelines below if you decide to create and host your own ratings icons. Your icons will be evaluated against these guidelines during the certification process.

You must create ratings in both SVG and PNG formats, SVG for high resolution Sonos apps, such as on iOS and Android, and PNG for desktop and legacy controllers. Once you’ve created your ratings, see Configure ratings to learn how to make them available to Sonos apps.

SVG format

Develop ratings using the following guidelines.

App Description File Name Total Size
Universal Hi-res ratings rating-icon-44×44.svg 44x44px

Vertically center your icon and export it in SVG Basic 1.1 format with an art board size of 44 points and an icon height of:

  • 16 points for evenly-proportioned icons such as a heart or a square.
  • 18 points for unevenly-proportioned icons such as a thumbs-up or down, or a star.

See Add images for details on how you should save SVG icons for proper display on Sonos apps.

Use the universal controller attribute as described in the Presentation Map Configuration section in Configure ratings.

Follow the specifications as described in the image below.

Ratings icons specification

Visual States

Use white (hex value #ffffff) line art for the default visual state for unselected hi-res icons and yellow (hex value #fbb040) line art for selected hi-res icons, as shown below.

PNG format

Develop ratings using the following guidelines. PNG images should have a density of 72 DPI, see Add images for details.

App Description File Name Total Size
ACR Android app ratings_icon_template_52x52.psd 52x52px
ACR-HDPI Android tablet app ratings_icon_template_80x80.psd 80x80px
ICR iOS app ratings_icon_template_52x52.psd 52x52px
WDCR Windows app ratings_icon_template_40x32.psd 40x32px
MDCR Mac OSX app ratings_icon_template_40x32.psd 40x32px
CR200 Sonos CONTROL ratings_icon_template_66x66.psd 66x66px

Follow the specifications as described in the image below.

Ratings icons specifications for legacy devices

Rating Button Background States

For legacy icons, Sonos apps control the visual state for unselected and selected icons. The Sonos app will provide a button background based on the rating status. Create transparent icons as described in the image above.