I was manly talking about icons, but not logos. Icons usually only have one color—which is often the same color as the surrounding font color. If your icon is o

I was manly talking about icons, but not logos. Icons usually only have one color—which is often the same color as the surrounding font color. If your icon is only a single <path> (most good icons are) then you can color them with: svg { fill: currentColor; } .parent { color: var(--text-color); } When you use dark-mode the color of the svg path should change with the text as long as the author changes --text-color in a dark-mode media query. @media (prefers-color-scheme: dark) { --text-color: wheat; } I don’t know about the size, but I suspect that if any the difference is negligible. Most of my icons are a few hundred bytes uncompressed. And I usually put them in a sprite which is usually well under 50 KiB uncompressed. I don’t know how large font icon files are, but I suspect they are not that much smaller that it makes a difference.