Templarian / MaterialDesign

✒7000+ Material Design Icons from the Community
https://materialdesignicons.com
Other
11.01k stars 721 forks source link

anvil-outline #7311

Open DWallinTresensa opened 10 months ago

DWallinTresensa commented 10 months ago

Before submitting a new icon contribution, please confirm the following:

Tell us about your contribution.

I wanted an alternative to the existing anvil icon with a lighter outlined style

Share a preview of your contribution.

image

Upload the icon source.

anvil-outline.svg.zip

MrGrigri commented 10 months ago

I believe the horn should also have a 2 pixels wide stroke

DWallinTresensa commented 10 months ago

The material guidelines suggests "If an icon requires complex details, subtle adjustments can be made to improve its legibility. " and gives two examples of icons using 1.5px, the paperclip (entirely 1.5px) and the ramen bowl (mixed 2px and 1.5px). I started with entirely 2px, but it makes the interior of that shape overly closed-off and messes with the balance of the icon so I moved it to 1.5px. The all-2px version makes the horn appear thicker than the rest of the icon, especially at small sizes, with not even a full empty pixel of internal space. 1.5px for that element makes it appear more visually consistent with proper internal spacing. I've attached an image of a 2px version for comparison: image

DWallinTresensa commented 10 months ago

I'm also attaching a comparison with the solid version. I tried to keep it visually consistent but I think it's useful to highlight differences. image

MrGrigri commented 10 months ago

Yes...but it also doesn't allow to mix the two; both 1px and 2px spacing in the same icon. What if the horn was filled in. And we also try to keep the two consistent with shapes as they are sometimes toggles on UX. So when a user clicks the icon there will be a slight shift. Sometimes this is unavoidable.

Don't get me wrong, I thank you for your efforts and I like how you are thinking this through. And it may result in us changing the default anvil icon to match the outline of this one.

DWallinTresensa commented 10 months ago

I was following the guidelines here but realize they might not exactly match the guidelines used within this community: https://m3.material.io/styles/icons/designing-icons

Screen Shot 2023-12-04 at 11 32 14 AM

Is there another guide you recommend?

MrGrigri commented 10 months ago

1.5px outline as well as shrinking the step of the anvil to 1.5 pixels as well; whilst maintaining the original shape.

image

Comparison

image

MrGrigri commented 10 months ago

Or just keeping the horn solid could also work.

image

DWallinTresensa commented 10 months ago

I think the solid horn approach works, but if reworking the existing anvil is in the cards I would suggest the following:

image image

It reworks the curves to utilize 45° angles and circular arcs that are more consistent with the Material look.

DWallinTresensa commented 10 months ago

Attaching files for these alternate icons anvil_rework.svg.zip anvil-outline_rework.svg.zip

DWallinTresensa commented 10 months ago

Another option if we are more willing to break with the existing general silhouette. This better sticks to recommended icon sizes/dimensions, and it's better centered visually, but is a bigger departure from the existing icon: image image

and files: anvil_reworkB.svg.zip anvil-outline_reworkB.svg.zip