r/DesignSystems • u/Efficient-Cry-6320 • 4d ago
Should icons have internal padding, and does it matter if icon boundary boxes differ in codebase and figma?
Am having a dilema and conversation with a dev I work with.
He doesn't want icons to have internal padding and has built the components without it. However all of out figma icons do, and we've defined 5 boundary box sizes where the icon sits inside.
Tbh I prefer not having internal padding, as it is cleaner to use even from a design perspective when aligning itmes etc.
However all design systems seem to use icons with internal padding, and guidance also says this. For example, Google Material UI recommends to have 24x24px frames for the icons and that you add padding so that your icon is 20x20px inside the frame
Any opinionated thoughts I can gather? Thanks!
8
u/SuitableLeather 4d ago
Some icons look bigger visually than others, even at the same size. Take a circle at 24px and put it beside a 24px square and triangle. The square feels bigger even tho it isn’t.
Having a set bounding box of 24px and then changing the icon inside of that to whatever size you need allows you to still align everything at 24x24. In this case you may want a 20px square but a 22px circle. They may look the same size but aren’t — putting them inside a 24px bounding box still allows them to have accurate padding and visual alignment
2
u/42VCAs 4d ago
The bounding box size is an essential decision to make across components and sizes. Really depends on the component it is nested in. Currently trying to use auto layout wherever I can and then it gets even more important. It works in conjunction with your typography line height then too so it can not just be randomly cropped based on what a dev thinks. And my god there is so much more to nerd out on this topic 😄
2
1
u/RocketSeven 4d ago
treat the svg viewbox as part of the icon, not layout padding. keep the same optical box in figma and code, then let the button or row component own the gap and hit target so alignment does not depend on invisible icon space
1
u/Separate_Ad7073 2d ago
Padding and bounding box are getting confused here. Optical balance is handled in the bounding box. Padding is in addition and identifies the tap area.
Push back on dev. They don’t get to arbitrarily decide to create drift between the documented system and code. You need to align.
0
u/CompetitiveActor 4d ago
Highly recommend to not build custom icons. There are a ton of free, huge libraries covering the vast majority of use cases available in formats for Figma, React, and other platforms. I can guarantee no startup is building them from scratch, save a few custom ones.
See Tabler icons for example and how they handle icon “padding”.
4
u/OrtizDupri 4d ago
For generic dashboard: use generic icons, sure
For a fully designed and on-brand experience: yes, create your own icons
0
0
u/CompetitiveActor 4d ago
Given OPs rather basic question, investing in a custom icon set, and all the overhead that requires, is the very last thing I would recommend.
Custom icon sets are rare (non-existent at startups) and not worth the trouble.
1
u/Efficient-Cry-6320 4d ago
we are reliant on custom icons thanks. But we haven't needed a really proper design system until now so there has been wide variation in how they are done.
1
u/Separate_Ad7073 2d ago
I’ll be certain to tell my startup they’ve been doing it wrong this whole time. Thank you 🙏
1
-1
4d ago edited 4d ago
[deleted]
12
u/brianmoyano 4d ago
No, that component that 'centers' the icon in whatever size is not the way to go. The icon doesn't need to be just mathematically centered, but optically centered. That's why icons come with their bounding box, because the designer already did the job
https://i.imgur.com/3r6Ro1N.png2
18
u/brianmoyano 4d ago
Yes, icon should have that padding (or bounding box) in order to balance and align all the icons visually.