Ratings Icon Guidelines

Ratings Icon Guidelines

Sonos apps use ratings icons as buttons for listeners to rate tracks and streams and to indicate the listener-rated status of tracks and streams. Use the guidelines below when creating ratings icons. Your icons will be evaluated against these guidelines during the certification process.

Build 26.1-74030 introduced a new user interface for some Sonos apps; create ratings icons in SVG format for these apps. Use PNG format for rating icons used by apps using the old user interface. Once your icons have been created, see TUTORIAL: Implementing SMAPI Ratings to learn how to make them available to Sonos apps.

New user interface (SVG format)

Use the Ratings Icon SVG template to generate hi-res ratings icons for Android (ACR) and iOS (ICR) apps using the new user interface.

App Description File Name Total Size
Universal Hi-res ratings rating-icon-44x44.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 Digital Asset Guideline Overview 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 of the Implementing SMAPI ratings tutorial.

See the image below for examples.

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.

For legacy icons, Sonos apps control the visual state for unselected and selected icons. Be sure to provide a transparent icon, as specified below.

Legacy user interface (PNG format)

Use the Ratings Icon Templates (Legacy Controllers) to create icons for apps using the old user interface. PNG images should have a density of 72 DPI, see Digital Asset Guideline Overview 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

See the image below for examples.

Rating Button Background States

The Sonos app will provide a button background based on the rating status. Create transparent icons as shown above.

Default Hi-Res Icons

Sonos offers default hi-res icons that cover many of the common scenarios for use in your configuration. These images are delivered through a CDN with edge caching. You are free to use these images in your <Icon> configuration nodes if you like. See Creating Ratings Icon Artwork for details.

Icon URL
Unselected http://sonos-img.ws.sonos.com/ban-unselected.svg
Selected http://sonos-img.ws.sonos.com/ban-selected.svg
Love - Unselected http://sonos-img.ws.sonos.com/love-unselected.svg
Love - Selected http://sonos-img.ws.sonos.com/love-selected.svg
Star - Unselected http://sonos-img.ws.sonos.com/star-unselected.svg
Star - Selected http://sonos-img.ws.sonos.com/star-selected.svg
Thumbs Down - Unselected http://sonos-img.ws.sonos.com/thumbs-down-unselected.svg
Thumbs Down - Selected http://sonos-img.ws.sonos.com/thumbs-down-selected.svg
Thumbs Up - Unselected http://sonos-img.ws.sonos.com/thumbs-up-unselected.svg
Thumbs Up - Selected http://sonos-img.ws.sonos.com/thumbs-up-selected.svg