Custom Browse Icon Guidelines

Custom Browse Icon Guidelines

Custom Browse Icons are images that appear in the browsable containers of a SMAPI service, such as Playlists, Artists, and Albums, shown below.

Custom browse icons are specified within the albumArtUri element. See the Implementing Custom Browse Icons tutorial for implementation details.

SONOS APP Image Formats

Custom browse icons are displayed in different sizes and formats, depending on the app. iOS and Android apps require SVGs, while Windows, Mac, and legacy controllers (such as the Sonos CONTROL) require PNGs. While you can provide PNGs for your custom browse icons for all apps, Sonos strongly encourages that you submit SVGs as they are more easily scalable and will be used by all apps in the future. See the Digital Asset Guideline Overview for a list of Sonoss.

Download the Service Logo and Custom Browse Icon Templates for sample custom browse icon templates.

iOS and Android Image Formats (SVG preferred)

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 Windows, Mac, and legacy controllers require images in PNG format, see the section below for details.

As shown below, use a primary brand color with no gradients for the tile background and a white or secondary brand color custom browse icon that is half the width and height of the tile. Be sure not to use gradients in your background color.

See the Digital Asset Guideline Overview for details on how to save SVG icons for proper display on Sonos apps.

iOS and ANdroid Image Formats (PNG)

See below for the iOS and Android custom browse icons in PNG format. Note that while you can provide these icons in PNG format, you may have to update them to SVG when they are no longer supported. It is strongly recommended that you instead submit these icons in SVG format as specified above.

Custom Browse Icon templates file

The table below lists the sample files in the Service Logo and Custom Browse Icon Templates file, including the file name and format, the output format to use when it is saved or exported, the maximum icon size in pixels* (px), and the icon background size in pixels. 

*The icon should use half the width and height of the asset.

Export as SVG Export as PNG Maximum icon size (px) Icon background size (px)
custom-browse-icon-40x40.eps custom-browse-icon-40x40.psd 20x20 40x40
N/A custom-browse-icon-80x80.psd 40x40 80x80
N/A custom-browse-icon-112x112.psd 56x56 112x112
N/A custom-browse-icon-200x200.psd 100x100 200x200
custom-browse-icon-290x290.eps custom-browse-icon-290x290.psd 145x145 290x290

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. PNG images should have a density of 72 DPI, see the Digital Asset Guideline Overview for details.

Windows, Mac, and Legacy Controllers (PNG)

You must also include custom assets that match the visual language of legacy firmware in the field, such as the Sonos CONTROL. The Windows and Mac desktop apps also use these assets. The example below shows the same custom browse icon used for all containers on a Mac desktop app.

Please provide two 80x80 and 40x40 pixel tiles for each available icon state: an active icon for use when the custom browse container is available to be browsed by the user and an inactive icon for use when the container is unavailable or restricted.

Download the Custom Browse Icon Template (Legacy Controllers) for a sample 80x80 pixel Adobe Photoshop file to use as a template when designing your custom browse icons for legacy controllers. Use this template for both size icons; simply resize it to provide the 40x40 icons.

The color scheme and layout guidelines are shown below. Note that the icon should not exceed 56x56 pixels for the 80x80 tile size, and should not exceed 28x28 pixels for the 40x40 tile size.