Change Color and Strokes of SVG Icon in TailwindCSS

SVG Icons are great in website design because these can be added directly to the code instead of imported as images. In TailwindCSS, you might be using heroicons or other SVG icons and want to change the color. In this guide, you’ll know how you can work with SVG icons to change the strokes and the color. All the examples use heroicons which is open source and free to use.

Changing Color on an SVG Icon in TailwindCSS

When you copy and paste an SVG icon, it always has a stroke property. This property is set to the currentColor by default. There are two ways to change the color of SVG icon. First is to change the stroke value to a color like blue or anything you want. The second method is to apply TailwindCSS class on the parent element and the SVG icon will automatically use that color as currentColor. Here is the code example.

You can check the working code example and the screenshot as the output of the above code.

Changing Stroke Width of SVG Icon in TailwindCSS

Same as the color, you can also change the stroke-width of an SVG icon in TailwindCSS. For this, you need to change the stroke-width property of the SVG icon. Here is an example of changing stroke width.

Conclusion

You can easily change the stroke color and stroke-width of an SVG icon in TailwindCSS. For changing color, you have 2 methods. The first is to change the stroke value from currentColor to something else. The second is to set the color of the parent container. To change the stroke width, just set the stroke-width value to a higher than the default.