<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/83bf928d-246b-4b00-acf7-995b02ad431d/Group_175767_(1).svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/83bf928d-246b-4b00-acf7-995b02ad431d/Group_175767_(1).svg" width="40px" /> **Return to website**

</aside>

The SVG files are the standard to use vector images in your Web app, applications and website projects. Their biggest advantage: you can rescale them while keeping a perfect quality, and they are easy to colorize with CSS.

Changing icon color

Change the color through the CSS declaration, by setting a a color for the .currentColor value used in the .svg files.

https://cdn-images-1.medium.com/max/1600/1*melrAHwD33TbTXq2V0ytsQ.png

Change stroke width

SVGs have a “stroke-width” attribute that can be set on the .svg tag directly or with CSS.

https://cdn-images-1.medium.com/max/1600/1*eNudHLWEQ1p_a41RyBOj8Q.png

Read this article for more details about the benefits of using SVG stroke.

Check also SVG for absolute beginners by Rob Levin

Scale strokes when changing icon size

Set the .vector-effect property of the SVG’s children to .non-scaling-stroke. This allows you to scale the icon without affecting the stroke width.Resizing a SVG circle with a “non-scaling-stroke” value

https://cdn-images-1.medium.com/max/1600/1*Ph1e2gpSUwX0CSvHDGQDNA.png

https://cdn-images-1.medium.com/max/1600/1*l3Yf9TTsU9UkMZj2wsfjOQ.png

Thanks to Cole Bemis for these tips 🙏🏻