Dashboard: Sonos card

Sonos card for Home Assistant’s Dashboard UI

Media player card for Sonos speakers!


  • Group/Ungroup speakers
  • Control multiple speaker
  • Play favorites from list
  • Media browser
  • Control individual volumes in a group
  • Artwork background
  • Possibility to override artwork
  • Shuffle and repeat mode
  • Theming
  • Configurable styling
  • Dynamic volume level slider
  • Track progress bar

and more!

Support the project

Do you like the Sonos Card? Support the project with a coffee :coffee:




This card is available in HACS (Home Assistant Community Store)


Download the resources, as you would do with all other modules.

Add the custom card as a module, like this:

  - url: /local/custom-sonos-card.js?v=1.0
    type: module


Individual sections

By default, all sections of the card is available and you can jump between them in the footer of the card.

However, you can also select individual sections to enable. Use this if you want to show the different sections next to
each (by adding multiple instances of the card with different sections enabled).

By using the section configuration you can utilise the full power of Home Assistant’s layout capabilities and also drag
in other cards in your Sonos Dashboard view.


Use the Visual Editor in Home Assistant to configure the card. Most options are available there.

Configuration in YAML

type: custom:sonos-card # or one of the individual sections mentioned above
# All settings below are optional

# common for all sections
title: ''
sections: # see explanation further up
  - volumes
  - groups
  - grouping
  - media browser
  - player
widthPercentage: 75 # default is 100. Use this to change the width of the card.
heightPercentage: 75 # default is 100. Use this to change the height of the card.
entityId: media_player.sonos_bedroom # Forces this player to be the selected one on loading the card (overrides url param etc)
entityNameRegexToReplace: 'SONOS ' # Regex pattern to replace parts of the entity names
entityNameReplacement: ''
entities: # Entities are automatically discovered if you don't supply this setting
  - media_player.sonos_kitchen
  - media_player.sonos_hallway
  - media_player.sonos_bedroom
  - media_player.sonos_livingroom

# groups specific
groupsTitle: ''
hideGroupCurrentTrack: true # default is false, which means song/track info for groups will be shown

# groupings specific
groupingTitle: ''
predefinedGroups: # defaults to empty
  - name: Inside
      - media_player.matrum
      - media_player.hall
  - name: Kök&Hall
    media: Legendary # If you want to start playing a specific favorite when grouping 
    entities: # Use below format if you want to set the volume of the speakers when grouping
      - player: media_player.kok
        volume: 10
      - player: media_player.hall
        volume: 5

# player specific
showVolumeUpAndDownButtons: true # default is false, shows buttons for increasing and decreasing volume
labelWhenNoMediaIsSelected: 'No media selected'
labelForTheAllVolumesSlider: 'All volumes'
mediaArtworkOverrides: # Show your own selected artwork if certain rules match
  - mediaTitleEquals: TV
    imageUrl: https://cdn-icons-png.flaticon.com/512/716/716429.png
    sizePercentage: 40
  - mediaContentIdEquals: "x-sonos-htastream:RINCON_949F3EC2E15B01400:spdif"
    imageUrl: https://cdn-icons-png.flaticon.com/512/4108/4108783.png
  - mediaTitleEquals: p4malmo-aac-192
    imageUrl: >-
  - ifMissing: true # ifMissing will only be used if none of the "Equals" overrides above resulted in a match 
    imageUrl: https://cdn-icons-png.flaticon.com/512/651/651758.png
customSources: # Main use case is probably to set tv media player to play TV sound
  media_player.tv: # set this to 'all' to show the custom source for all players
    - title: TV
      thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
dynamicVolumeSlider: true # default is false. See more in section further down.
artworkHostname: #default is ''. Usually not needed, but depending on your setup your device might not be able to access the artwork on the default host. One example where it could be needed is if you cast the dashboard with Google Cast.

# media browser specific
mediaBrowserItemsPerRow: 4 # default is 1. Use this to show items as icons.
mediaBrowserShowTitleForThumbnailIcons: true # default is false. Only makes a difference if mediaBrowserItemsPerRow > 1. Will show title for thumbnail artworks.
  Ed Sheeran Radio: https://i.scdn.co/image/ab6761610000e5eb4d2f80ceffc6c70a432ccd7c
  Legendary: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f
  fallback: https://cdn-icons-png.flaticon.com/512/651/651717.png # will use this if thumbnail is missing and none of the above matches. Defaults to black music notes with white background.  
  - Local Media
  - My Bad Playlist

Using individual section cards

As mentioned earlier, use the individual sections for more layout flexibility.

Here is an example:

type: horizontal-stack
  - type: custom:sonos-card
      - groups
      - grouping
      - volumes
    widthPercentage: 100
  - type: vertical-stack
      - type: entities
          - type: button
              action: navigate
              navigation_path: /
            icon: mdi:arrow-left-circle
            name: Back to home
      - type: custom:sonos-card
          - player
  - type: custom:sonos-card
      - media browser

Theme variables

The following variables are being used and can be set in your theme to change the appearance of the card:


Read more about using theme variables here: Home Assistant Frontend - Home Assistant

CSS Styling

The recommend way to change look and feel is to use the built in theming capabilities in Home Assistant. If that is not enough this card supports being styled with card_mod.


type: custom:sonos-card
  style: |
    ha-card {
      color: white !important;
      background: gray;
      --accent-color: pink;
      --primary-color: white;
      --secondary-text-color: white;
      --secondary-background-color: pink;

The above YAML renders the following:

Dynamic volume level slider

The volume level slider is dynamically adjusting its scale. If volume is below 20% it will show a scale up to 30%. Above
20% it will show a scale up to 100%. The color will also change from green to red clearly indicating which scale is
being used.

Enable it in config with dynamicVolumeSlider: true

Linking to specific player

Append #media_player.my_sonos_player to page URL to have that player selected.

If entityId is configured for the card, the url param will be ignored. See more in the Usage section above.


I plugged this in and my SONOS system had a complete meltdown 3 times. I had to stop my host to try to force control back of my system each time. I don’t know why but on this last time, I got a stable experience but I also intentionally didn’t push it to its limit.

So with that, I have some notes:
The first problem I encountered was some sort of scanning. When I selected a frequently used playlist, it just kept changing tracks quickly. To the point where no music was being played and I couldn’t regain control. While struggling to regain control through a HA reboot in the SONOS app, as fast I could clear out the song queue for a device, it was putting it right back. It was the correct music queue, it just kept forcing it in again and again.

The second problem I encountered was grouping. I have 9 rooms of SONOS and that’s kindof a lot even on a good day. Trying a select all players made the player and my sonos have a meltdown. Joining one at a time is slow but does work. Having all of them joined, while trying to regain control of my sonos system with a HA reboot, I kept trying to ungroup the rooms in the sonos app and it kept regrouping them.

The last time, I queued up a station instead from SONOS, then from the lovelace card pressed play. playback was beautiful. I added one room at a time to it, patiently waiting between and it worked (although grouping is slow). I know even running grouping automations can be slow so this might just be the cost of doing business.

I was afraid to push it any further after I got one successful playback. I can pick up additional testing later but trying to kill/regrain sonos control is a wild and time consuming process and I’ve had enough for tonight.

This is better than any Sonos card I’ve touched so far but I think there’s still some unexplained behavior. There’s definitely something that it persistently isn’t liking but I’ll need to play with it more to articulate it.

1 Like

Thanks for taking the time to give this feedback!

I very much agree that there is something strange going on here. I see similar behaviour, but not as bad as you state it. Many times it works fine for me, but every now and then it becomes unstable.

As I wrote above, the code is forked from another repo and the parts we are talking about here have not been built with me.

Looking at the code for these parts, it looks straight forward (and correct), so it would be really interesting to understand what is wrong with it.
I hope I can find time to investigate it. Meanwhile, please let me know if you have any ideas on how to improve it!

@Sergeantpup I did some debugging last night, and could notice that many duplicate calls were being made to Home Assistant for a single click in the card.
Finally I found that the original author had used the updated() method to add event handlers, instead of using the @click functionality.
As soon as I changed the code to instead use @click everywhere, it started behaving as expected.

Could you please have another go at this? The new release should be available in HACS.
On github you can see it here: https://github.com/johanfrick/custom-sonos-card/releases/tag/v1.2.0

This is absolutely hilarious. Thank you for this great laugh this morning. Yes, I will try it again and see what I get!

1 Like

I plugged it in and it works beautifully. The grouping timing has even improved immensely (I’m sure from not fighting itself anymore). Ungroup all is a nice button, wish the sonos app had that.

I WAS a little concerned when I saw a button available to add a device that’s already part of the group and I was terrified to press it but I pressed it and nothing happened. I’m ok with nothing happening, I was just afraid of bad stuff happening. My only note would be to not display the main as an addable room if it’s already part of the group but that’s purely cosmetic at this point (it doesn’t alter functionality).

Somebody suggested this card to me recently (I’m not sure if it was you) before the fork and I know it wasn’t an acceptable solution at that time. THIS is now an acceptable replacement for what I’ve been using:

I will likely keep the sonos card now permanently

One weird question that doesn’t really have anything to do with the card but there’s not an MDI icon for SONOS? Even Hubitat had SONOS icons. I saw amazon, google, all the social medias but the only icon I could find is the lame casting icon. It just seemed like something that was ubiquitous enough to be in everybodys icon db. Do you know of any magical way I can get a sonos icon?

Thanks for testing it, and I’ve totally missed that bug about current master being displayed under grouping.

That is now fixed: https://github.com/johanfrick/custom-sonos-card/releases/tag/v1.2.2

For icons, you can use this one in HACS which has Sonos (and lot’s of other brands): https://github.com/elax46/custom-brand-icons#sonos-device

Well you’ve certainly fulfilled my wildest fantasies with icons today. Thank you for introducing me to that resource. I have already configured all my device icons.

Thanks for the update to the code. I plugged it in and it definitely handles the removal of the master smoothly. Just as fast as you can click a primary, it removes the appropriate entity from the grouping list. The only weird thing I saw was a truncating thing that happens sometimes based on room name length. This is probably based on a zillion factors like screen size, resolution, dashboard layout but it is just a cosmetic quirk I noticed. Maybe you can force the group/ungroup buttons to their own line permanently?

Functionally, I think you hit the jackpot.

I cannot seem to get this working. Followed the instructions on HACS, used the example yaml for card config, with my entities in it, reduced to only the required fields, and no luck. Any pointers?

Is it just not displaying? Because I get that sometimes. Or are you getting an error in your custom card?

here is my exact card:

type: custom:custom-sonos-card
name: ''
groupsTitle: ''
groupingTitle: ''
favoritesTitle: ''
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
  - media_player.bedroom_sonos
  - media_player.bedroom_2_sonos
  - media_player.deck_sonos
  - media_player.dining_room_sonos
  - media_player.garage_sonos
  - media_player.living_room_sonos
  - media_player.media_room_sonos
  - media_player.office_sonos
  - media_player.stairway_sonos

Love the card, I dont know if I’m doing something wrong, or need to wrap the card in another card like css mod, but mine just does not seem to display like the images I see. The favorites and media player column is too condensed.

Here is my card

type: custom:custom-sonos-card
name: Sonos Card
groupsTitle: Devices
groupingTitle: ''
favoritesTitle: ' Favorites'
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
  - media_player.house_speakers_sonos
  - media_player.great_room_sonos
  - media_player.living_room_sonos
1 Like

Glad you like it!
To make it wider, please use panel mode. Read more here Views - Home Assistant

I’m really liking the functionality in this card, thanks for making it!

Is it/will it be “themable”? I don’t do much with my HA front-end, so if I’m just missing something obvious, be gentle :wink:

Thanks again!

1 Like

Theming support added with v2.0.0. Read more here: https://github.com/johanfrick/custom-sonos-card#theme-variables

Last night it was nothing, this morning it’s an error…

Please try again with v2.0.1

1 Like

I was too afraid to ask for something other than white backgrounds lol. I’m happy with what I got but to tone down all the white on the screen at night would be great!

Yes, now you can control it yourself, since theming support has been added.

Thanks working now!

1 Like

I am over the moon thrilled with this

What do you think about adding a clear playlist button? Doesn’t have to be for all but a way to clear out the playlist of any room

1 Like