(Next.js) How can I change the color of SVG in next/image?

I recommend you to not to use svg files directly, but use Playground SVG (https://react-svgr.com/playground/), convert the file to JS and then you can change the color and other stuff by props.

I am using Next/Image and inserting the SVG url dynamically. For this case I needed to use css filter to somehow change the SVG color.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

I think the best solution here is not to use Image. by default the nextjs Image component is not doing any optimization on svg's. You will then have multiple options/solutions to your problem:

1. Extend webpack config on your next.config.js file using @svgr/webpack:

// next.config.js

webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack"]
  });

  return config;
}

// The file where u want to import the svg
import YourSvg from './public/yourSvg.svg'

// I recommend using the `currentColor` property on your svg, but you can also pass the color as prop
<YourSvg color="red" />

2. Using babel-plugin-inline-react-svg: https://github.com/vercel/next.js/discussions/20993#discussioncomment-760119