Service Logo Guidelines

Service Logo Guidelines

Your Music Service Logo is displayed in the Music Services list on Sonos apps. See the Listing your music service in the Service Catalog tutorial for examples of logos in the user interface and details about where to reference these icons in the Version Manager. You can use images or text in your service logo. See the details below for each format.

SONOS APPs

Service logos are displayed in different sizes and required in different formats depending on your app. See the Digital Asset Guideline Overview for a list of these apps.

Image Formats

Download the Service Logo and Custom Browse Icon Templates for sample service logo templates. See the Digital Asset Guideline Overview for details on how you should save SVG icons for proper display on Sonos apps.

While you can submit images in PNG or SVG format, SVG format is more easily scalable to different sizes that can be used by prospective Sonos apps in the future. Note that the desktop apps and Sonos CONTROL (CR200) require images in PNG format. See the section below for details.

Windows and Mac OS Desktop APPs & SONOS CONTROL

For the Windows (WDCR) and Mac OS (MDCR) desktop apps and the Sonos CONTROL, provide circular logos in PNG format in the following dimensions:

 App  Dimensions 
MDCR, WDCR 18x18
MDCR, WDCR 24x24
MDCR, WDCR, Sonos CONTROL 48x48
MDCR, WDCR 72x72

Please provide all dimensions above as some apps use different-sized images in different places. PNG images should have a density of 72 DPI, see the Digital Asset Guideline Overview for details.

Android and ios APPs

For iOS (ICR) and Android Tablets (ACR HDPI) prior to build 26.1-74030, you must also provide round PNG-formatted logos in the sizes below. These are the same style of logos as those used for desktop apps. See the Windows, Mac OS, and Sonos CONTROL Service Logos section below for details.

App  Dimensions 
ACR/ICR 36x36
ACR HDPI 54x54

For build 26.1-74030 and above, provide a square logo in the following dimensions for Android (ACR) and iOS (ICR) apps. Please provide SVGs for high-resolution apps, and PNGs if you support older apps, as mentioned below:

 Dimensions (PNG format)*   Dimensions (SVG format) 
20x20  
40x40 40x40
80x80  
112x112  
200x200  
400x400 400x400

 

iOS and Android service logos

Use the color scheme and layout guidelines below when creating service logos for iOS and Android apps. Use a color that is the primary color for your brand with a solid fill and no gradients for the logo background. Use a simple shape or text with a white (hex value #ffffff) or secondary color (or colors) for your brand, with a solid fill and no gradients for the logo. If using a white fill for the background color, add a 2px color stroke edge to the inside. See below for illustrations.

See the Digital Asset Guideline Overview for details on how you should save logos for proper display on Sonos apps.

SVG format service logo for ios and android APPs

Service Logo SVG guidelines

PNG FORMAT SERVICE LOGO FOR IOS AND ANDROID APPS

Service Logo PNG guidelines

Windows, Mac 0s, and SONOS CONTROL Service Logos

Download the Service Logo Templates (Legacy Controllers) Adobe Photoshop templates to create service logos for Windows and Mac OS desktop apps and the Sonos CONTROL as well as iOS (ICR) and Android Tablets (ACR HDPI) prior to build 26.1-74030. Use circular icons in the following sizes: 18, 24, 36, 48, 54, and 72 pixels. See the images below for an illustration.

Follow the steps below to add your artwork:

  1. Open the template using Adobe Photoshop.
  2. Copy your artwork.
  3. Select the mask layer below the "Your art here" layer. See below.
  4. Paste your artwork.
  5. Hide or delete the "Your art here" layer.

You can now select your artwork and scale it to fit the artwork mask. For example, choose Edit > Free Transform to scale it (CTRL-T on Windows or Command-T on Mac OS). If you use an image editor other than Photoshop, be sure that the icon takes up the full canvas. If your icon is aliased, leave no more than 1px of clear space around the icon.

table of service logo and custom browse icon templates

The table below lists the sample service logo files in the Service Logo and Custom Browse Icon Templates file as well as the maximum logo and icon size and background size. Once extracted, the files will be in folders for Adobe Illustrator (EPS) or Photoshop (PSD). Use the Illustrator EPS files to generate SVG output files and the Photoshop PSD files to generate PNG output files.

The table lists the file name, format, the output format to use when it is saved or exported, the maximum logo size in pixels (px), and the background size. The sample files with “logo” in their names are examples of image-based logos. Files named “logotype” are examples of text-based logos.

Logo background
size (px)
Maximum logo
size (px)
Export as SVG
(image)
Export as SVG
(text)
Export as PNG
(image)
Export as PNG
(text)
20x20       logo-20x20.psd logotype-20x20.eps
40x40 30x30 logo-40x40.eps logotype-40x40.eps logo-40x40.psd logotype-40x40.psd
80x80 48x48     logo-80x80.psd logotype-80x80.psd
112x112 68x68     logo-112x112.psd logotype-112x112.psd
200x200 120x120     logo-200x200.psd logotype-200x200.psd
400x400 240x240 logo-400x400.eps logotype-400x400.eps logo-400x400.psd logotype-400x400.psd