Kevin
Kevin

Reputation: 71

How to change stroke weight / thickness of a Google Icon?

I've been trying to figure this one out for a few days, the material icons are a bit too thick, so I downloaded one and have been trying to change the stroke weight / thickness. But just using the stroke-width property doesn't change anything, and if I add a 'stroke' it also adds a border around the element.

For example, here is the 'public' icon from google / material icons

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0 1.1.9 2 2 2v1.93C7.06 19.43 4 16.07 4 12zm13.89 5.4c-.26-.81-1-1.4-1.9-1.4h-1v-3c0-.55-.45-1-1-1h-6v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41C17.92 5.77 20 8.65 20 12c0 2.08-.81 3.98-2.11 5.4z"/>
</svg>

How would I go about making this thinner or thicker? Is there a minimum font weight? ( I want some pretty thin strokes for this)

Upvotes: 0

Views: 1131

Answers (1)

The design of the icon is your problem

Paste the path in https://yqnn.github.io/svg-path-editor/

If you want more detail you need to edit the (filled) path.

Upvotes: 1

Related Questions