• Install Custom Icons through HACS
• Restart Home Assistant
• Click this
  • Alternatively, go to your integrations configuration, click "Add Integration" and find "Custom Icons"

• Go to your integrations configuration, click "Custom Icons" and then "CONFIGURE".

• Here, in the Configuration Panel, you can pick which icon sets you want to use. If you don't see any icons, make sure to click "Download" to update Iconify icons once.

• After enabling icon sets and refreshing your browser (F5) you will be able to find your icons in the icon picker.

To use your own icons, place their .svg files in <config>/custom_icons (the directory should have been created by Custom Icons automatically). You can also place icons in subdirectories.

If you add new icons, you need to push the RELOAD button before they can be used.

Make sure the "Local" collection is enabled, and they will then be available using the local: prefix.

Note about safety:

SVG files may contain SVG and Javascript and shall be considered unsafe. Home Assistant normally protects you from harmful code in SVG icons, but in order to make e.g. full color or animated icons work this protection has been removed by Custom Icons.

Only use icons you trust (and preferably have inspected the code for). The author of Custom Icons takes no responsibility for the contents of any icon set - not even those included in Iconify.

Note about colors:

SVG files can contain color information. Some SVGs are meant to be used as icons, and will have no color or the magic currentcolor value. Those will follow the color of your entities (e.g. turning yellow when an entity is switched on or adjusting to a light color). Some SVGs are not meant to be used as icons, they can include elements of one or more colors.

If you want to use a colorized file as a color changing icon, you may need to modify the file yourself. This will require a little bit of CSS knowledge.

• First: Make a backup of your svg file.
• Open the .svg file in a text editor.
• Look for anything that looks like fill: #123456; or stroke: red; or something like that. The easiest way would be to change those to fill: currentcolor; or stroke: currentcolor; (make sure to keep the semicolon ;).
• Also look for anything like stroke="blue". Any instances of those can be removed.
• You probably don't want to change anything that says fill: none; or fill="none", though. Experiment.
• Make sure to go into the configuration and push the RELOAD button after making your changes.

Iconify is a framework for several popular icon sets.

The icon sets are update frequently, so you can manually download the lates updates from the Custom Icons configuration panel.

You also need to download them by clicking the button manually the first time.

If you bought the fontawesome package, you should have received the icon set as a zip file or something.

Somewhere in this file, there's a folder named metadata which contains a file icons.json.

Copy and rename this file to <config>/custom_icons/fontawesome.json.

Push the RELOAD button in the Custom Icons configuration panel.

There is some support for svg webfonts like RPG Awesome.

To use those, get the <whatever>-webfont.svg file and copy that to <config>/custom_icons/.

Push the RELOAD button in the Custom Icons configuration panel.

Note that SVG webfonts has been deprecated and removed from the SVG standard. Things may or may not work.

Yes

• Remove hass-fontawesome
• Install hass-custom_icons
• Open the Custom Icons configuration panel (see Usage above)
• Click "Download"

No