More multicolor icons

[ElVit]

Hi, is it possible to create more multicolor icons? From the official SF Symbols page it looks like it is possible.

I know its a lot of work but maybe there are people (like me) willing to help you. It would help if you could write a little guide on how to do it.

[grischard]

FWIW, here are the icons that currently support multicolor:

waveform-badge-exclamationmark
bell-square-fill
leaf-circle
gear-badge-xmark
desktopcomputer-trianglebadge-exclamationmark
clock-badge-exclamationmark-fill
trash-square
clock-badge-checkmark-fill
delete-forward
allergens
flag-square-fill
restart-circle-fill
eye-slash-circle-fill
forward-circle-fill
hourglass-tophalf-filled
sun-max-circle-fill
speaker-circle-fill
hammer-circle-fill
gear-badge-questionmark
parkingsign-circle-fill
person-crop-circle-badge-questionmark-fill
waveform-badge-minus
delete-backward-fill
smallcircle-filled-circle-fill
briefcase-circle
shuffle-circle-fill
trash-slash-square
wifi-circle-fill
calendar-day-timeline-leading
circle-hexagongrid-fill
mic-badge-plus
mic-fill-badge-plus
bed-double-circle-fill
circle-grid-3x3-circle-fill
bell-badge-circle-fill
antenna-radiowaves-left-and-right-circle
circle-hexagongrid-circle-fill
calendar-day-timeline-left
clock-badge-checkmark
backward-circle-fill
ivfluid-bag
cross-vial
bookmark-square
briefcase-circle-fill
speaker-badge-exclamationmark-fill
mic-square
ivfluid-bag-fill
arrow-right-to-line-circle-fill
line-3-horizontal-decrease-circle-fill
battery-75
brazilianrealsign-circle-fill
point-3-filled-connected-trianglepath-dotted
arrow-down-to-line-circle-fill
bolt-square
bolt-car-circle-fill
hourglass-circle
wifi-circle
person-crop-circle-badge-exclamationmark-fill
hand-raised-square
mic-square-fill
arrow-forward-to-line-circle-fill
list-bullet-circle-fill
fork-knife
trash-square-fill
delete-backward
mic-slash-circle-fill
gear-circle
heart-square-fill
waveform-badge-plus
fuelpump-circle-fill
gearshape-circle-fill
mappin-square
square-and-arrow-up-trianglebadge-exclamationmark
eye-trianglebadge-exclamationmark-fill
flag-square
bolt-car-circle
hourglass-circle-fill
heart-square
brazilianrealsign-square-fill
hand-thumbsdown-circle-fill
app-badge-checkmark-fill
film-circle-fill
line-3-horizontal-circle-fill
bolt-square-fill
arrow-up-to-line-circle-fill
pin-square-fill
snowflake
hand-raised-circle-fill
music-mic-circle-fill
trash-slash-circle-fill
line-2-horizontal-decrease-circle-fill
calendar-day-timeline-trailing
hand-raised-circle
antenna-radiowaves-left-and-right-circle-fill
laptopcomputer-trianglebadge-exclamationmark
mappin-square-fill
rectangle-on-rectangle-slash-circle-fill
bell-square
arrow-backward-to-line-circle-fill
testtube-2
eye-trianglebadge-exclamationmark
clock-badge-exclamationmark
power-circle-fill
arrow-left-to-line-circle-fill
location-square
heart-rectangle
sleep-circle-fill
trash-slash-circle
leaf-circle-fill
repeat-1-circle-fill
bell-badge-circle
speaker-badge-exclamationmark
aqi-high
bed-double-circle
gear-circle-fill
creditcard-trianglebadge-exclamationmark
sun-and-horizon-fill
map-circle-fill
checkmark-circle-trianglebadge-exclamationmark
rectangle-on-rectangle-circle-fill
battery-50
repeat-circle-fill
location-north-circle
location-square-fill
wake-circle-fill
fork-knife-circle-fill
calendar-day-timeline-right
location-north-circle-fill
bookmark-square-fill
delete-forward-fill
hourglass-bottomhalf-filled
pin-square
app-badge-checkmark
hand-raised-square-fill
cart-circle-fill
fork-knife-circle
hand-thumbsup-circle-fill
infinity-circle-fill
trash-slash-square-fill
heart-rectangle-fill

[menahishayan]

If you're referring to "Variable color" in the SF Symbols 4 page, that's a feature of the SF Symbols app and not of the icons themselves.

Icons can be colored in a single color via HA Themes, or multicolored only if SF Symbols provides them in multicolor to begin with (i.e., the list mentioned by @grischard). Other icons cannot be used in multicolor. However, if you're willing to generate your own set of icons via Variable Color (the colors can only be set once, at the time of export) you may try the following:

1. Clone the build-tools branch
2. Download the SF Symbols app
3. Follow the Readme to export SF Symbols. Be sure to set the colors you would like to export the icons in. These are the colors that will reflect in the final "multicolor" icons.
4. Use the scripts (as per the Readme) to extract the SVGs and generate the icon pack.
5. Import your newly created package into HA

IMO, this is a tremendous amount of effort to add color to certain icons and I would personally not recommend it for the amount of time it would take, but if you really want to, this is how it would be done.