Service logos are line art images that represent your service in the music catalog. Listeners see this logo when searching for your content service to add it to their Sonos system. They then see the logo once they’ve added your service and they want to use it. Service logos represent your brand in the Sonos app. See the Submit your service for examples of logos in the user interface and other details. You can use images or text in your service logo. See the details below for each format.
This guide goes over:
Sonos apps
Service logos are displayed in different sizes and required in different formats depending on the device running the Sonos app. See Add images for a list of devices supported by the Sonos app.
The guidelines below show the best way Sonos can present your brand to listeners in the Sonos app.
For example, you may want to use your primary brand color 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.
You must provide logos in all the formats mentioned below.
Square logos
You can submit images in PNG or SVG format.
| PNG dimensions | SVG dimensions |
|---|---|
| 20×20 | |
| 40×40 | 40×40 |
| 80×80 | |
| 112×112 | |
| 200×200 | |
| 400×400 | 400×400 |
PNG images should have a density of 72 DPI. See Add images for details.
SVG format
Save logos in the SVG Basic 1.1 profile. Do not use SVG <text> and <mask> elements or hidden layers in your line art because they can cause display problems in the Sonos app. See the images below for an illustration.
Please make sure the service logos meet the following guidelines:
- DO add a solid background color to your service logo.
- DON’T add rounded borders to your logo except for the round versions for desktop.
- DON’T have your icon background match the background of light (#D8D8D8) or dark (#262626) mode.
- DON’T have your icon background be transparent.
NOTE We place a 1pt solid border that matches our other border lines to ensure service icons maintain visual structure in case their background is too similar to the dark and light mode backgrounds.
Light Border : #C2C2C2
Dark Border: #3C3C3C
PNG format
See the images below for an illustration.
Round logos
For the Windows (WDCR) and MacOS (MDCR) desktop apps and the Sonos CR200, provide circular logos in PNG format in the following dimensions:
| App | Dimensions |
|---|---|
| MDCR, WDCR | 18×18 |
| MDCR, WDCR | 24×24 |
| ACR/ICR | 36×36 |
| MDCR, WDCR, Sonos CONTROL | 48×48 |
| ACR HDPI | 54×54 |
| MDCR, WDCR | 72×72 |
Please provide all dimensions above as some apps use different-sized images in different places. See the images below for an illustration.
