SVG icons for Google devices

Configuration Frontend
1

Does anyone know where I could find good SVG icons for Google devices?

I’m looking for these icons which I want to use as custom icons in Home Assistant:

image
image1240×124 8.55 KB

1 Like
2

There’s a SimpleIcons integration (HACS) that allows you to use many brand icons under a specific si: name space anywhere you can use mdi: it’s what I use for my Amazon icons.

I know SI has a lot of Google icons but unsure of those specific ones. They’re usually brand specific not device specific.

1 Like
3

Yeah, SimpleIcons are brand specific. I’m looking for SVG icons of the original Google Home, Google Home Mini for example.

4

I found what I was looking for here: Google Fonts

5

@wwwescape how do you add Google Fonts to home assistant?

6

What I did was:

  1. Installed hass-fontawesome.
  2. Downloaded the SVG icon I wanted from Google Fonts.
  3. Saved the downloaded SVG icon to <Home Assistant Config>/custom_icons/. For example: <Home Assistant Config>/custom_icons/google-home.svg
  4. Use the icon as required with fapro:<Icon Name>. For example fapro:google-home.

Refer the hass-fontawesome documentation for more information.

Using this, I was able to build something like:

image

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: picture-entity
        entity: sensor.living_room_speaker_active_app
        image: local/custom_media/images/app_banners/google-home.png
        state_image:
          Gaana: local/custom_media/images/app_banners/gaana.png
          com.gaana.fire_tv: local/custom_media/images/app_banners/gaana.png
          Google Cast: local/custom_media/images/app_banners/google-cast.png
          JioSaavn - Google Home: local/custom_media/images/app_banners/jiosaavn.png
          Spotify: local/custom_media/images/app_banners/spotify.png
          YouTube Music: local/custom_media/images/app_banners/youtube-music.png
        show_state: false
        show_name: false
        card_mod:
          style: |
            :host {
              {% if is_state('media_player.living_room_speaker', 'unavailable') %}
                filter: grayscale(100%);
              {% endif %}
            }
  - type: horizontal-stack
    cards:
      - type: custom:mini-media-player
        entity: media_player.living_room_speaker
        icon: fapro:google-home
        artwork: material
        info_mode: scroll
        hide:
          source: true
          power: true
          state_label: true
        card_mod:
          style: |
            :host {
              {% if is_state('media_player.living_room_speaker', 'unavailable') %}
                --paper-item-icon-color: #6F6F6F;
              {% else %}
                --paper-item-icon-color: #73bf69;
              {% endif %}
            }

I don’t know if there is an easier to use Google Fonts directly but this is how I was able to get them to work.