Unlike rest of the icons we can't use these inside of a symbols sprite, because of gradients inside that break id`s. So we just place their code on a page as it is.
We use colored, complete version of icons, even for the solid color case. But we add id="hoverable-path" on paths that could be greyed out. Later on we add styles on it, like so:
.net:not(:hover) #hoverable-path {
fill: var(--neutral-color-1);
}
Inside of one image we can use as many of id="hoverable-path". So it is more like CSS classes rather than CSS ids.
There is also a #hoverable-background but this is being used only in WhatsApp icon and needed only in colored cases. In stroked cases it is filled with transparent color.
Other IDs, for example for gradients, should be different between icons. If we embed SVGs right into HTML, then the gradient from the instagram will affect the ID in the whatsapp if they are the same and so on. So we gotta make unique IDs like #instagram_linear_1, #whatsapp_linear_1 etc.