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.
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.
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.
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.