mdpkh

a. k. a. Vid the Kid

Autistic • asexual • nonbinary • nudist • roadgeek • computer programmer • EGA/VGA enthusiast • main fronter of Indigoville (plural system). 🟩English | 🟢Español | 🔶日本語 | 🔸العربية


Most web sites / apps crop user icons to circles these days. Ten years ago it was almost universally squares. Maybe in 5 years we'll be back to mostly squares again.

If you're designing a user icon or a logo and you want it to look equally native to a circular or to a square space in a website or app layout, I think you should fit the design to the intersection of a concentric circle and square of the same area. A very close approximation of this with integer dimensions gives the circle a diameter of 334 pixels, and the square a side length of 296 pixels. When submitting the icon to a platform that will slot it into a square in its layout, just submit the 296px square region that tightly bounds the icon. When submitting the icon to a platform that will slot it into a circle in its layout, pad it out to a 334px square region that encompasses the extended circular boundary of the icon; the platform will then crop it to a circle that tightly bounds the icon as designed.

This can also be used as a guide for cropping photos for simple personal portrait icons and having a comparable area of the original photo visible on square-icon platforms versus on circle-icon platforms.

And, yes, I do plan to adapt my current circle-based user icon to this shape in the near future.


You must log in to comment.

in reply to @mdpkh's post: