Documentation of built-in symbols / icons

Hello all,

this question is so simple that I can’t find an answer searching the forum or the docs… :face_with_monocle:
So: when I add a button (or similar) to lovelace - there is a preselected icon like - let’s say - palette or as code: hass:palette

I figured out that there is something like hass:flash too but:
Where do I find the list of built-in icons?

Thanks, Bernd

3 Likes

https://cdn.materialdesignicons.com/5.3.45/

4 Likes

Thank you @M1ke !
I knew, that with the answer I could write a much better question and get many answers :smiley:

Even in the docs / the additional resource at the bottom:

1 Like

I think we’re using a later version than 5.3.45:

So:

Either way I just use:

and check the history on the rare occasion that an icon refuses to show up. 10 times out of 10 it’s because it’s a new icon that isn’t in HA yet and only takes a release or so until it is.

There’s also this:

8 Likes

Cool to have all the links and resources here in the thread!

If you search the docs for "icon" you won’t find that info… Perhaps there should be a link somewhere in variables-section for icon too?

Thanks for the additions! :smiley:
5.3.45 was implemented in 0.113 and 5.5.55 will only be as of 0.115 - I am not sure whether 5.4.55 was introduced in 0.114 (couldn’t find anything related in the release notes) - can’t check, as I couldn’t wait for all the cool things in 0.115 :laughing:.

1 Like

The release notes for each release (posted in the blog topic) usually list the MDI version if it is updated.

There’s also a place on the home assistant frontend github that shows the current version… but I cant find it.

Edit: Here it is. Search for @mdi:

Here’s a list of the current hass: icons I’ve put together:
Count: 190

hass:account
hass:alert
hass:alert-circle
hass:altimeter
hass:apple-safari
hass:apps
hass:arrow-bottom-left
hass:arrow-down
hass:arrow-left
hass:arrow-right
hass:arrow-top-right
hass:arrow-up
hass:autorenew
hass:battery
hass:battery-
hass:battery-alert
hass:battery-outline
hass:battery-unknown
hass:bell
hass:bell-outline
hass:bell-plus
hass:bell-ring
hass:bell-sleep
hass:bookmark
hass:brightness-
hass:brightness-5
hass:broom
hass:calendar
hass:calendar-clock
hass:cancel
hass:cast
hass:cast-connected
hass:chart-line
hass:check
hass:checkbox-marked-circle
hass:check-circle-outline
hass:chevron-down
hass:chevron-left
hass:chevron-right
hass:chevron-up
hass:clock
hass:clock-fast
hass:close
hass:cloud-upload
hass:code-tags
hass:cog
hass:comment-alert
hass:content-save
hass:crop-portrait
hass:cursor-pointer
hass:delete
hass:door-closed
hass:door-open
hass:dots-horizontal
hass:dots-vertical
hass:drawing
hass:emoticon
hass:emoticon-dead
hass:emoticon-poop
hass:exit-to-app
hass:eye
hass:eye-off
hass:fan
hass:file-document
hass:file-multiple
hass:file-word-box
hass:file-xml
hass:filter-variant
hass:fire
hass:flash
hass:flash-off
hass:flower
hass:format-list-bulleted
hass:garage
hass:garage-open
hass:gauge
hass:google-circles-communities
hass:google-pages
hass:hammer
hass:help-circle
hass:home
hass:home-assistant
hass:home-automation
hass:home-map-marker
hass:home-outline
hass:home-variant
hass:image-filter-center-focus
hass:image-filter-frames
hass:information-outline
hass:leaf
hass:lightbulb
hass:link
hass:lock
hass:lock-open
hass:login-variant
hass:mailbox
hass:map-marker
hass:menu
hass:menu-down
hass:menu-up
hass:microphone
hass:music-note
hass:music-note-off
hass:nature
hass:notification-clear-all
hass:open-in-new
hass:original-icon
hass:palette
hass:pause
hass:pencil
hass:pencil-off
hass:play
hass:playlist-play
hass:play-pause
hass:plus
hass:plus-circle
hass:poll-box
hass:power
hass:power-plug
hass:power-plug-off
hass:power-sleep
hass:radiobox-blank
hass:radio-tower
hass:ray-vertex
hass:refresh
hass:remote
hass:robot-vacuum
hass:rotate-left
hass:rotate-right
hass:run
hass:security
hass:send
hass:server-network
hass:server-network-off
hass:settings
hass:shield-check
hass:shield-home
hass:shield-lock
hass:shield-outline
hass:skip-next
hass:skip-previous
hass:sleep
hass:snowflake
hass:square
hass:square-outline
hass:stop
hass:target-variant
hass:television
hass:television-box
hass:television-off
hass:textbox
hass:text-to-speech
hass:thermometer
hass:thermostat
hass:timer
hass:timer-off
hass:timer-sand
hass:tooltip-account
hass:undo
hass:user-icon
hass:vibrate
hass:video
hass:view-dashboard
hass:volume-high
hass:volume-medium
hass:volume-minus
hass:volume-off
hass:volume-plus
hass:walk
hass:water
hass:water-off
hass:water-percent
hass:weather-cloudy
hass:weather-fog
hass:weather-hail
hass:weather-lightning
hass:weather-lightning-rainy
hass:weather-night
hass:weather-partlycloudy
hass:weather-pouring
hass:weather-rainy
hass:weather-snowy
hass:weather-snowy-rainy
hass:weather-sunny
hass:weather-windy
hass:weather-windy-variant
hass:white-balance-sunny
hass:window-closed
hass:window-open
hass:z-wave
21 Likes

Hy everybody!
I just create fork with some changes for ha users:

  • change icon names (mdi-home to mdi:home)
    now you can just copy and past icon name
  • add serach input
  • remove usless info

Check out here https://aatrubilin.github.io/pictogrammers.github.io/@mdi/font/5.9.55/

2 Likes

Tip

in this URL you can search icons by text: Material Design Icons

Man, that’s hella good, love the fact you changed the annoying ‘mdi-’ to ‘mdi:’

I’m not clear on how to use this material design icons.
Let’s say I want to use this icon: battery-50 from materialdesignicons.com
I got this when I select it:
image
Then I copy the mdiBattery50 and paste it on my home assistant sensor and add the colon:
mdi:battery50


It then shows as no icon:
image
What else needs to be done to use mdi icons?

Look at the cheat sheet.

image

Use exactly as written except with mdi- replaced with mdi:, so mdi:battery-50.

Also, if you declare or customise your sensor with device_class: battery, it will give you a dynamically-updated icon representing the charge automatically (docs):

3 Likes

You con do it from the mdi website too:

8514fbc0824ef13436a033940e43f4bc13334042

2 Likes

there is a difference between ‘B’ and ‘b’ - your ‘mdi:Battery’ is unknown.

but ‘mdi:battery’ does work !
UPDATE: I meant ‘mdi:battery-50’ does work
image
END OF UPDATE

Tiny point and bad luck that you did not copy but typed yourself.
But at least a lesson learned that with new stuff copy and paste is the past to start with.
Avoids headache - as long as the developer had done it right.

Cheeeers for your next battery (icon)

Yeah but it is not the 50% battery icon they were after.

sorry, I missed the ‘-50’
and the ‘B’ attery had caused the issue cause it really works
image

and it does not work with the ‘B’ as you can see here
image

Thanks for this site :slight_smile: