Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Last update: Dec 12, 2022

Overview

Custom icon library

Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Upon each Material Design icons update to HA, icons tend to be deprecated, and every now and then I'd love to keep using some. Branded icons, or legacy models. In many Pr's to the main MDI library, icon designs get rejected, while still very useable. Some of these are added in this library. Several icons by the Frontend magician Matt8707 are listed, and I've also found use for the finer grained Shutter icons by g-kiss, but needed them in another format.

Structure of the file copied from the great and appreciated Hass Hue Icon repo by @arallsopp who should recieve all the credits and without whom the HA interface would not be the same ;-)

Thanks to all!

Installation

On Hacs, install as custom repository. For manual installation, add:

- url: /local/lovelace/resources/custom-icons/custom-icons.js?v=0.1.4
  type: module

to your resources file (adapt path to your own folder structure), or click

Usage

In your entity editor, specify an icon as cil:icon-name, to indicate the icon to be from this Custom Icon Libary.
If you set state_color: true in your card, you'll see the icons get colorised based upon the current theme settings.

Example:

    - type: entities
      title: Custom icons
      state_color: true
      show_header_toggle: false
      entities:
        - entity: switch.tester
          name: Switch Light
          icon: cil:light-switch
        - entity: device_tracker.mijn_mobiel
          name: My Phone
          icon: cil:cellphone-iphone
        - entity: light.alarm
          name: Ceiling light
          icon: cil:ikea-death-star
        - type: section
          label: Set icon via Custom-ui/customize
        - light.bureau_left
        - light.bureau_right

Of course, you can also get crafty, using Custom-ui, and set your icons in a template:

homeassistant:
  customize:
    light.bureau_left:
      templates:
        icon: >
          return (state === 'on') ? 'cil:desklamp-on' : 'mdi:desk-lamp';

Icons

Custom made and legacy

custom-icons includes legacy Mdi icons, and several special purpose icons made on request.

On:

Off:

Listed with icon author:

Icon	Name	Author
	apple-homepod	arallsopp
	apple-homepod-mini	arallsopp
	cellphone-iphone	Mdi
	cooker-hood	arallsopp
	cooker-hood-curve	arallsopp
	cooker-hood-trapezoid	arallsopp
	delete-alert	idevo89
	delete-alert-outline	idevo89
	desklamp-on	Mdi
	dishwasher-silverware	MrGrigri
	docker-watchtower	Matt8707
	earth-alert	MrGrigri
	earth-vibrate	MrGrigri
	eq-calibrate	Matt8707
	hdmi-source	Matt8707
	home-broken	MrGrigri
	home-broken-outline	MrGrigri
	home-climate	arallsopp
	home-climate-outline	arallsopp
	home-export-no-roof-outline	goyney
	home-import-no-roof-outline	goyney
	home-pulse	MrGrigri
	hue	Matt8707
	ikea-death-star	arallsopp
	imac-alternative	Matt8707
	imac-ssd	Matt8707
	iphone-modern	Matt8707
	laptop-mac	Mdi
	light-switch	arallsopp
	lock	Matt8707
	pedestal-fan	Matt8707
	roborock-filter	Matt8707
	roborock-mainbrush	Matt8707
	roborock-sensor	Matt8707
	roborock-sidebrush	Matt8707
	roborock-vacuum	Matt8707
	roborock-vacuum-map	Matt8707
	shutter-0	g-kiss
	shutter-1	g-kiss
	shutter-2	g-kiss
	shutter-3	g-kiss
	shutter-4	g-kiss
	studio-monitor	Matt8707
	sun-angle	goyney
	sun-angle-variant	goyney
	synology-nas	Matt8707
	table-cylinder-lamp	GunterAV
	thermometer-empty	goyney
	thermometer-full	goyney
	tv	Matt8707
	uplighter	GunterAV
	uplighter-2-way	GunterAV

Icon authors

Mdi arallsopp MrGrigri idevo89 goyney g-kiss GunterAV Matt8707 tgrelka boehan

Want to join and add an icon?

Please feel free to add an icon request, and open a discussion for that, preferably with the .svg in attachment. Of course, you can also open a Pr.

Comments

Extractor hood

Discussed in https://github.com/Mariusthvdb/custom-icons/discussions/7

^{Originally posted by Mariusthvdb May 12, 2022} something that has always amazed is we don't have an icon for an extractor hood. My request for that at Mdi was never followed up on, so Ill repeat it here ;-)

examples:

enhancement icon request

opened by arallsopp 13
Icon not showing

Hi,

Thank you very much for all the work that was put into 'custom-icons', I like the icons very much. I do have an issue though ;) I am using an icon and have it configured as below. The issue is that the icon disappears once the page is refreshed F5. To get it back, I have to edit the main page again and press Klaar (my installation is in Dutch). Same on mobile app. Do I have to include something in the configuration.yaml (extra_module_url:) as with other icon packages like hass-hue-icons.js?

Like this:

opened by defisit 9
Lutron pico remote

I've added the svgs and manually edited the custom-icons.js to include them. I've not changed the readme or the screen caps as I think you generate those using utilities. Can't remember to be honest, which will be slightly embarrasing if it turns out I wrote them :)

Linking @sdholden28 to this conversation, so that they can track the changes and see when it gets promoted.

opened by arallsopp 4
Lutron Pico Icons

Howdo.

I've had a request at hass-hue-icons for an icon for the Lutron Pico switch. Whilst I understand these are commonly paired with people's hue installs, they're not really a hue appliance, and I wondered whether you'd accept them here?

Here are the additions, which I've just created for sdholden28. Would they be acceptable for custom-icons?

| Icon | Name | | :--- | :--- | | | lutron-pico | | | lutron-pico-b1 | | | lutron-pico-b2 | | | lutron-pico-b3 | | | lutron-pico-b4 | | | lutron-pico-b5 |

opened by arallsopp 3
home/quake icons

Templarian/MaterialDesign#4358 home-pulse: @MrGrigri home-broken: @MrGrigri home-broken-outline:@MrGrigri earth-alert: @MrGrigri earth-vibrate: @MrGrigri. Templarian/MaterialDesign#3765 home-import-no-roof-outline: @goyney home-export-no-roof-outline: @goyney

opened by Mariusthvdb 2
proposed addition: ikea-death-star

Howdo.

I had a request in at https://github.com/arallsopp/hass-hue-icons/issues/135, for the ikea death star lamp. I've created an icon to suit, and have put it into the docs/svgs folder, updating the script to reference it.

I've also pointed the OP nagyrobi towards this repo as a source of non-hue icons :)

opened by arallsopp 2
add deleted icons
from HA https://github.com/home-assistant/frontend/pull/13175 see: https://dev.materialdesignicons.com/changelog#version-7.0.96

added:

desktop-mac

google-home
opened by Mariusthvdb 0
home-climate/-outline

as discussed in https://github.com/Templarian/MaterialDesign/issues/3158 home-climate: https://github.com/tgrelka home-climate-outline: https://github.com/boehan

opened by Mariusthvdb 0

Releases(v0.3.7)

v0.3.7(Oct 4, 2022)

add: google-home-off google-home-alt google-home-alt-off

for the stereo users of the google home device. Thank you @arallsopp and @yormedia Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/v0.3.6...v0.3.7
Source code(tar.gz)
Source code(zip)
custom-icons.js(38.70 KB)
v0.3.6(Oct 3, 2022)
What's Changed

Lutron pico remote by @arallsopp in https://github.com/Mariusthvdb/custom-icons/pull/42

Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/v0.3.5...v0.3.6
Source code(tar.gz)
Source code(zip)
custom-icons.js(35.85 KB)
v0.3.5(Jul 22, 2022)

since it now is available in core MDI icon set, see https://github.com/Templarian/MaterialDesign/issues/6590#issuecomment-1128375512 thanks @goyney
Source code(tar.gz)
Source code(zip)
custom-icons.js(29.38 KB)
v0.3.4(Jul 22, 2022)
What's Changed

add several removed files by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/35

laptop-chrome book

laptop-windows

tablet-ipad-legacy

edited de-duplicated keywords Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/v0.3.3...v0.3.4

Source code(tar.gz)
Source code(zip)
custom-icons.js(30.02 KB)
v0.3.3(Jul 22, 2022)
tablet-android android-messages desktop-mac-dashboard

What's Changed

add deleted MDI icons by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/34

Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/v0.3.1...v0.3.3
Source code(tar.gz)
Source code(zip)
custom-icons.js(29.59 KB)
v0.3.1(Jul 22, 2022)

from HA https://github.com/home-assistant/frontend/pull/13175 see: https://dev.materialdesignicons.com/changelog#version-7.0.96

added:

desktop-mac google-home
Source code(tar.gz)
Source code(zip)
custom-icons.js(28.61 KB)
v0.2.1(May 17, 2022)
What's Changed

Create cooker-hood-alt by @arallsopp in https://github.com/Mariusthvdb/custom-icons/pull/23

Rename cooker-hood-alt.svg to cooker-hood.svg by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/25

Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/v0.2.0...v0.2.1

rename cooker-hood-alt to cooker-hood as new default
Source code(tar.gz)
Source code(zip)
custom-icons.js(27.47 KB)
v0.2.0(May 16, 2022)
What's Changed

Delete corona-virus.svg by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/20

Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/v0.1.9...v0.2.0
Source code(tar.gz)
Source code(zip)
custom-icons.js(23.34 KB)
v0.1.9(May 16, 2022)
What's Changed

add icons Matt8707 by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/18

correct credits by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/19

Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/0.1.7...v0.1.8
Source code(tar.gz)
Source code(zip)
custom-icons.js(24.12 KB)
0.1.7(May 14, 2022)
What's Changed

delete-alert/-outline by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/17

Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/0.1.6...0.1.7
Source code(tar.gz)
Source code(zip)
custom-icons.js(24.15 KB)
0.1.6(May 14, 2022)
What's Changed

Added Gunter's remaining icons by @arallsopp in https://github.com/Mariusthvdb/custom-icons/pull/8

delete-alert/-outline by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/10

dishwasher-silverware by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/11

home-climate/-outline by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/12

home/quake icons by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/13

order table - 2 column only by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/14

remove width="24" height="24" by @Mariusthvdb in https://github.com/Mariusthvdb/custom-icons/pull/15

New Contributors

@Mariusthvdb made their first contribution in https://github.com/Mariusthvdb/custom-icons/pull/10

Full Changelog: https://github.com/Mariusthvdb/custom-icons/compare/0.1.5...0.1.6
Source code(tar.gz)
Source code(zip)
custom-icons.js(23.53 KB)
0.1.5(May 12, 2022)

Breaking: icon prefix changed from 'custom' to 'cil'

several new icons work in progress: table with all. icons and credits.
Source code(tar.gz)
Source code(zip)
custom-icons.js(17.35 KB)
0.1.4(May 12, 2022)

Still lots to do. Readme, thanks to, icons copied

In the HA UI, use the icon selecter and 'custom' as prefix
Source code(tar.gz)
Source code(zip)
custom-icons.js(10.57 KB)

Owner

Marius

aka @mariusthvdb Gists: https://gist.github.com/Mariusthvdb

GitHub

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

The HTML5 Shiv The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explo

9.9k Jan 2, 2023

A meme generator plugin for Figma and FigJam. Import memes from all over the internet with customizable captions and share it far and wide.

Is This A Meme? ???? ?? A meme generator plugin for Figma and FigJam. Import memes from all over the internet, add your captions, and share it far and

6 Aug 30, 2022

DNS-Blocklists: For a better internet - keep the internet clean!

DNS Blocklists - For a better internet! Multi - Cleans the Internet and protects your privacy! An all in one blocklist based on the OISD blocklist, ba

280 Jan 2, 2023

Open-source NFID SDK for Internet Identity, a blockchain authentication system for the Internet Computer.

NFID-SDK is an open source software development kit that contains examples and packages for developers to integrate NFID into your application

15 Dec 23, 2022

Metaschool is a virtual school that includes a set of several existing schools in society.

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

2 Jul 9, 2022

Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Piccloud Piccloud is a full-stack application built with Angular & Spring Boot. It is an online image clipboard that lets you share images over the in

3 Dec 15, 2022

Touch enabled selectable plugin inspired by the jQuery UI widget.

Inspired by the jQuery UI Selectable plugin. Functionality and options are identical to the jQuery UI version with some additions and performance enha

135 Nov 24, 2022

A JavaScript library that creates a small dropdown list of selectable Emojis.

Welcome to EmojiButtonList.js: This is a JavaScript library that creates a small dropdown list of selectable Emojis. To get started, download the sour

2 Mar 27, 2021

Claim $ARB airdrop of several wallets at the same time and transfer all the tokens to one address

arbitrum-airdrop-claimer Claim $ARB airdrop of several wallets at the same time and transfer all tokens to one address You need to have Node.js instal

4 Mar 21, 2023

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

2 Jun 21, 2022

Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Related tags

Overview

Custom icon library

Installation

Usage

Example:

Icons

Custom made and legacy

Icon authors

Want to join and add an icon?

Comments

Discussed in https://github.com/Mariusthvdb/custom-icons/discussions/7

Releases(v0.3.7)

v0.3.7(Oct 4, 2022)

v0.3.6(Oct 3, 2022)

What's Changed

v0.3.5(Jul 22, 2022)

v0.3.4(Jul 22, 2022)

What's Changed

v0.3.3(Jul 22, 2022)

What's Changed

v0.3.1(Jul 22, 2022)

v0.2.1(May 17, 2022)

What's Changed

v0.2.0(May 16, 2022)

What's Changed

v0.1.9(May 16, 2022)

What's Changed

0.1.7(May 14, 2022)

What's Changed

0.1.6(May 14, 2022)

What's Changed

New Contributors

0.1.5(May 12, 2022)

0.1.4(May 12, 2022)

Owner

Marius

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

A meme generator plugin for Figma and FigJam. Import memes from all over the internet with customizable captions and share it far and wide.

DNS-Blocklists: For a better internet - keep the internet clean!

Open-source NFID SDK for Internet Identity, a blockchain authentication system for the Internet Computer.

Metaschool is a virtual school that includes a set of several existing schools in society.

Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Touch enabled selectable plugin inspired by the jQuery UI widget.

A JavaScript library that creates a small dropdown list of selectable Emojis.

Claim $ARB airdrop of several wallets at the same time and transfer all the tokens to one address

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

In this project I write the test for several functions and used the TDD with Jest and JavaScript.

This is ongoing project and it will has plan for several co-workers and friends.

Solid Forms provides several form control objects useful for making working with forms easier.

Plugin builder that compiles to several different discord client mods.

radiQL, your one-stop-shop for migrating from a legacy REST backend to an efficient and modern GraphQL API

An non-official esx-legacy 1.5 version for quasar inventory purpose.

A faster alternative to legacy node:querystring module

Weather app made using openweather api that supports over 200,000 cities

SET Revision is a website to help you identify "sets" in the card game SET.