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.

The workaround with CSS filter works fine, but would be nice to have a simpler tint solution for this in the UI. Anything planned in this direction?

Unfortunately there is nothing new on this topic.
But instead of a CSS filter I would suggest using the fill property in the custom CSS field.
css fill.zip (111.5 KB)

3 Likes

Thanks. Much leaner then the CSS filter :+1: