How to centre an icon inside a square and a circle?
By @edent
· design logo NaBloPoMo · 2 comments · 200 words · read ~344 times.
A little mathematical / spatial / design problem I've been having.
I have an icon which, depending on the user's preference, can be inside a square or a circle. Is it possible for it to be centred in both?
Here's a visual example. On the left is the AirBnB logo centred in a square. When the background is turned into a circle, the logo appears to "drop" - the bottom of the logo is closer to the edge than the top of the logo.
So, let's change that and make the logo's extremities equidistant from the circumference of the circle:
Now, in the square version, it appears to be floating near the top.
Part of the problem is that I don't know what terms I need to search for. I am lacking in design vocabulary.
Is this a problem which can be solved? Can you help square this circle? Please let me know!
Mastodon
Twitter
Facebook
LinkedIn
Reddit
HackerNews
Lobsters
Pocket
WhatsApp
Telegram
To achieve the visual effect that the icon is equidistant from all sides of the shape you could draw the smallest shape that can contain the icon then center that shape within the target shape. (shape = square or circle)
Maybe a terminology to look for is “Visual center”? Sounds a lot like it in terms of this Medium blog post: https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175