/ Forums

Is there a reason for padding around icons?

#1

The padding around icons makes it difficult to align them properly with other elements on the page.

Here is the Circle Outlined Thin icon:

You can see from the selection box that the icon is larger than it visually looks. When trying to align things to the visual edges of icons, this makes Mockups slower to use, not faster.

It could be argued that someone using Mockups should not be aiming for pixel perfection.

However, if making a change such as this helps the user get closer to pixel perfection and using Mockups is just as fast, I’d say it’s a win-win!

Here is another example, the Square Outlined icon:

The padding at the bottom of the icon is greater than the padding at the top of the icon! This means anyone using the quick guides to position elements relative to this icon will end up with the elements below further away than the elements above.

In this case, it’s not an issue of visual perfection, but of consistency, which is a founding principle of design.

I’m curious: What is the reason that icons have this padding around them in the first place?

#2

Hi @ahobday,

Thanks for reaching out about this matter.

You may know this already but we switched to using Font Awesome icons in our little tool, and this is why our control over this is pretty limited.

The padding for each icon is defined by the Font awesome team and may differ (or not be pixel perfect) from one icon to another.

The best way to get this issue fixed for a specific icon would be to report it to the Font Awesome team, as I see some reports for specific icons there already. Here is an example for the plus icon.

I’m sorry that I don’t have a more direct way to fix this, but hopefully, this information will help.

Have a great day, Anthony!

#3

Thanks for your quick reply! From reading the example you linked to, it looks like the padding on some of the icons is not equal because the height of the icon makes it impossible to centre in the grid they use.

I guess that they cannot provide the icons with no padding because it’s necessary for the font system they’re using.

I’d also suggest that using a font system for icons in a software design tool is a bad idea for just this reason! But I doubt you’ll replace the whole icon system because it’s got minor issues :slight_smile:

#4

We decided to switch to the FA icon set because it is convenient for many reasons and most users seem to like it so far.

That being said, we definitely want to know if it causes pain too, so thanks for bringing this discussion to the table. If others feel the same way, please add your like or comment here.

Thanks again @ahobday! :slight_smile:

#5

One advantage with using a system like FA is that the developer has easy access to all of the icons after adding a library reference, rather than taking screenshots or searching the web for similar ones to save and import one at a time.

The padding has caused issues for me as well.

An alternate system that could be investigated are the gyphicons found in bootstrap.

#6

Is Font Awesome open source? If it is, is it therefore possible for Balsamiq to modify the font so that there is no padding?

When those icons are used on their own in a wireframe, they no longer need to have padding for any meaningful reason.

#7

Interesting idea @ahobday, I’ll share it with the team and we’ll discuss it further.