Awesome

Home Assistant Cupertino Icons

Apple SF Symbols Icons for Home Assistant! (3000+ Icons)

<div style="display: inline-block;"> <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/house.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/lightbulb_fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/lightbulb.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/alarm.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/app_badge_fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/battery_25.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/bed_double_fill.svg" alt="preview" width="50"/> <br/> <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/camera_fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/cloud_moon_rain.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/cloud_sun.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/moon_stars.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/moon_zzz_fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/person_crop_circle_badge_checkmark.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/speaker_2_fill.svg" alt="preview" width="50"/> </div>

Install

HACS (Recommended)

HACS tab > Menu > Custom Repository
Paste this repo's URL
Select Integration in the dropdown
Install cupertino-icons from HACS
Restart Home Assistant
Home Assistant > Settings > Integrations > Add > Cupertino Icons > Install

The icons should be usable in Home Assistant now. If it doesnt show up, try refreshing the page, private browsing or restart Home Assistant.

Manual

Copy custom_components/cupertino into your custom_components folder
Restart Home Assistant
Home Assistant > Settings > Integrations > Add > Cupertino Icons > Install

The icons should be usable in Home Assistant now. If it doesnt show up, try refreshing the page, private browsing or restart Home Assistant

Usage

Prefix: ios
Eg: ios:lightbulb-fill | ios:cloud-moon-rain | ios:bed-double-fill

Multi-Color Icons! (v3.0+)

<div style="display: inline-block;"> <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/gear-badge-xmark.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/antenna-radiowaves-left-and-right-circle-fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/aqi-high.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/clock-badge-exclamationmark-fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/circle-hexagongrid-fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/drop-circle-fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/eye-trianglebadge-exclamationmark-fill.svg" alt="preview" width="50"/> <br/> <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/desktopcomputer-trianglebadge-exclamationmark.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/fork-knife-circle-fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/gear-badge-questionmark.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/bed-double-circle-fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/delete-backward-fill.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/gear-badge-questionmark.svg" alt="preview" width="50"/>     <img src="https://github.com/menahishayan/HomeAssistant-Cupertino-Icons/blob/build-tools/readme-preview/waveform-badge-plus.svg" alt="preview" width="50"/> </div>

SF Symbols 3+ supports multi-color icons. This functionality has been ported into this repo to support multi-color icons in Home Assistant!

Just add Suffixes #color, #invert, #color-invert or #fullcolor to change the icon colors! (Credit to thomasloven for the inspiration)

Eg:

ios:gear-badge-xmark#color
ios:gear-badge-xmark#color-invert
ios:gear-badge-xmark#fullcolor

Icon Reference

v3.0 Update

Home Assistant Cupertino Icons has now been updated to SF Symbols v3.0 with 3167 Icons! (Copyrighted icons excluded)
Supports Home Assistant's icon picker (2021.11.0+)

SF Symbols | Apple
SF Symbols Reference | SFSymbols.com

You may download the MacOS App from Apple for a better reference.

Note: underscores(_) and dots(.) must be swapped with hipens(-)

Breaking Changes

Starting with v3.0+, this repo has been changed from a lovelace/frontend repo to a full-fledged integration. If you're upgrading from an older version:

HACS > Uninstall "cupertino-icons"
HACS > Menu > Custom Repository
Delete this repo
Follow Install instructions above

Legal Disclaimer

Certain icons are copyrighted by Apple and are not allowed to used with modification. These icons have not been exported and are not present in this repo. They will not be included.

<hr/>

To Do

☑️ Upgrade to SF Pro Symbols v2.1
☑️ Upgrade to SF Pro Symbols v3.0
☑️ Multicolor support
☑️ Icon Picker

Changelog

v3.0.2

Fixed a bug that caused sizing issues

v3.0.1

Fixed a bug that caused multi-color icons to be displayed incorrectly

v3.0

Update to SF Symbols 3.0
Support for multicolor icons
Supports icon picker
Restructure and refactor layout
Breaking Changes: Repo type has been changed from frontend/lovelace plugin to a full-fledged integration. You may need to uninstall, delete the repo from HACS and reinstall.