0

If you look at the containing vector of Material Design Icons, this is what makes the icons match in size. However the vectors of the content inside are not all the same sizes and follow no standard, therefore the icons are jagged when they are lined up vertically or horizontally.

Here is an example of the containing vector:

enter image description here

Here is an example of the content box:

enter image description here

When placed side by side with other icons, the sizes of the content are all different sizes. It creates a design problem and is not pleasing to the eye.

Is there a solution for getting the content of Material Design Icons the same width / and or height? If not what other free icons solve this problem?

closed as off-topic by Mike M, locationunknown, Shreyas Tripathy, Danny Varod, Brendon May 19 at 13:54

This question appears to be off-topic. The users who voted to close gave these specific reasons:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – locationunknown, Danny Varod, Brendon
  • "Questions requesting Icon Suggestions are off topic. While the subject of icons is on topic, there's very little value in soliciting suggestions for a specific icon in a specific context. See this meta post for more information about this topic." – Mike M, Shreyas Tripathy
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 3
    The solution to this issue is to not design with every icon in the exact same size, but to design with every icon in the same balance. Some icons can be very heavy due to their fills, and some very light because they don't take a lot of space (chevrons, for example). It's quite tricky to design with this in mind, hence why very commonplace icons are still being perfected. You can manually check all icons you use and edit them if you think it's necessary. – Wanda May 10 at 7:54
3

As Wanda has already replied, icons are designed with Visual Balance in mind. If you look at Material Design guide or any icon guide there is square and then there's wide and tall. The wide and the tall icons exceed the basic square to some degree. A wide icon will be shorter than the square height, so in order to compensate it goes wider and extends beyonds the square in about the same amount. Same goes for the tall icon but in the other way. However, because of the stated problem, designers do try to stick to the square as much as possible.

If you want all equally sized as the container, then may be get the SVG files and edit them yourself. In order to maintain the visual balance you can try using Outline icons instead of Filled.

0

I can't help with Material Design Icons, however Fontawesome icons have a fixed width option you set by adding fa-fw to the icons class. They have both free and paid icons.

I'm using Fontawesome icons in my new Tree which uses Material Design.

  • The issue isn't whether or not the icons come with fixed width, it is whether the content inside the container matches the width. Just because all of the containers have the same or matching widths doesn't mean the icons will align or match width. See images above. – jeancode May 9 at 13:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.