Own icons radio station

Is it possible to make your own icons? I would like the radio station icon to display like the defined SONOS icon.

Custom icon is not currently supported, but you may be interested to cast your vote and add your use cases in the following feature request thread.

Can you clarify what you mean by the radio station icon? Are you referring to one of the 1x1 tiles? (eg. rmf maxxx)?

A common approach is to use a Media Tile and then use the Hyperlink Action to run your desired rule to start your station playing.

@James has an example of this in his Create "Jukebox" Dashboard with Album Art for Echo or Sonos Devices thread:

If you’re referring to the Album Art tile in the top-left corner of your screenshot, that depends on if the media player and the radio station exposes the relevant album art.

1 Like

Yes I know I can use Media Tiles, but is this the way to prepare the icon like on the project? Is it possible that an uploaded icon or graphic could behave like this on my project? I would really like all tiles to be translucent, and unfortunately when creating Create Media Tiles I don’t have that option.

In your last screenshot, the three tiles on the right appear to have a semi-transparent style applied to them. Did you want them to look different and if so, how?

Media Tiles can use Styles just like any other tile, so you can use semi-transparent or opaque (solid) colors as a background if desired. You can always edit the Style applied to the tile and use a Custom Style (or even custom CSS applied to a named style) if desired.

I made these three icons on the right in Photoshop to show what I mean. Unfortunately I don’t know what kind of JPG, TIFF or PNG to upload to create a transparent background. I already solved the problem because I uploaded the GIF file and now it’s great. One more question, is it possible to enable glow option in such an icon defined by me ? As in defined icons?

PNG is a good format if you are looking for transparency, but you must specifically save the image with transparency enabled – the approach for this varies with different image editors. GIF also supports transparency but it’s generally used for animations (it also generally results in a bigger file).

You could apply a glow to the image in your image editor. Depending on the image, you might also be able to apply Custom CSS using filter: drop-shadow(), but that’s a more advanced technique.

Is your goal to only have the glow showing when that particular station is ‘active’ or always show the glow? If the goal is only when the station is ‘active’, how are you tracking the ‘active’ status of each station?