Changing the color of an SVG icon

Hi,

is there a way to change the color of an SVG icon in Antetype? Otherwise I would have to generate three icons for each icon button: blueish grey for normal, black for hover and blue for pressed.

These would be a lot of icons to generate.

Thanks for your time!

Carlos

Yes, you can. In the CSS field, use a css filter. This will work best for monochrome icons, obviously. Here’s a useful tool if you need colours rather than black and white:

1 Like

You could also paste the svg code in the html field of the style inspector and change the color in the code.

Thanks for your answers. Could you give me an answer for a dummy, though? For example, if I want to color an icon with the HEX value “424747”, what should I write exactly in the CSS or the html field?
Sorry and thank you!

enter the colour-value:

and copy the filter-string into the css-field

svg-filter.zip (146.0 KB)

1 Like

SVG Fill test.atype.zip (133.4 KB) It would be cool if you could target the fill attribute of the embedded svg from within antetype. Then, you could set its colour in the css field, using the fill attribute. Like in this example:

<svg id="fe3c8dda-16da-41aa-8c65-8880b97a39fc" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="94" height="73" viewBox="0 0 94 73">
  <g>
    <rect x="0.5" y="0.5" width="93" height="72" fill="currentColor"/>
    <path d="M93,1V72H1V1H93m1-1H0V73H94V0Z"/>
  </g>
</svg>

It works if you paste the code into the HTML editor but with larger svgs, it will be a bit unwieldy.