How can I change the color of an SVG inside an img tag using HEX code?

[charliehenry]

I'm trying to figure out, how to override the current colour of an SVG that is actually inside an image. It seems actually only works with filters CSS, but I need it to work with HEX code. Is there any chance to recolor the SVG file uploaded via Metafield? Any help will be much appreciated.

The code:

{{- block.settings.custom_icon | image_url: width: block.settings.custom_icon.width | image_tag: loading: 'lazy', style: style, sizes: sizes, widths: widths, class: 'test-2' -}}

.test-2 {
  filter: invert(50%) sepia(92%) saturate(2575%) hue-rotate(161deg) brightness(94%) contrast(101%);
}

what I want to make:

  .test-2 {
  color: rgb(var(--text-color)) !important;
}

/*================ OR ================*/

  .test-2 {
  color: #FFFF !important;
}

/*Note, nothing of above works*/

The input and output

(The idea is to recolor the custom icon by metafield...

Thank you so much