How can I decrease the weight/thickness of an svg icon?-CodePudding

I want to reduce the thickness of the following icon:

 <svg width="85" height="85" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                    class="ion">
                    <path
                        d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z"
                        stroke="white" stroke-width="0.5" fill="none" />
                </svg>

Please help me with this.

CodePudding user response：

You can alter the stroke-width within the SVG itself or you can override that stroke-width attribute 'externally' by setting CSS.

For example:

body {
  background: black;
}

svg path {
  stroke-width: 0.3;
}

<svg width="85" height="85" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="ion">
                    <path
                        d="M6 12C6 15.3137 8.68629 18 12 18C14.6124 18 16.8349 16.3304 17.6586 14H12V10H21.8047V14H21.8C20.8734 18.5645 16.8379 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C15.445 2 18.4831 3.742 20.2815 6.39318L17.0039 8.68815C15.9296 7.06812 14.0895 6 12 6C8.68629 6 6 8.68629 6 12Z"
                        stroke="white" stroke-width="0.5" fill="none" />
                </svg>

CodePudding user response：

Try modifying the stroke-width="0.5" to a smaller value.