Inconsistent Circular Icons

[edent]

Circular icons have different radiuses (radii?)

Some, like Orcid are 256 - taking up the whole space. Others are 192 - the inside of the guidelines.

Some have a transparent background, others are on white.

What should we do?

Paging @judeGibbons @baybal @alexanderadam @SelenIT @RazrFalcon for their wisdom!

[alexanderadam]

1. it should be definitely the inside of the guidelines (192)
2. background-wise I have no idea. It's probably better with background because some icons won't work otherwise. But of course it would sometimes be better to have a transparent background.

[judeGibbons]

I have done several icons which are explicitly circles: I started by making the diameter fit that of the yellow circle in the template (435px) (Dribbble, DuckDuckGo, Safari) so there is a border of background colour around them, but then I reworked the Chrome icon which has a diameter of 512px, so I then changed to making them that size (Openbenches, Clojure), so that when the box radius is 50% they will clip to the circumference of the icon. I think the former look better when they're in a square box with a corner radius, but the latter is nicer when they're clipped to a circle. The Firefox one would need to have a wee bit of background visible as the pointy bit of the tail sticks out from the mainly circular icon.

I'm happy to redo circular icons to be 512px.

Re the background colour: I think of how the icon would look if it were put onto a photographic or patterned background - if the background were transparent then any areas of the background colour in the icon would need to be explicitly set otherwise the background would show through, which in most cases would be confusing visually.

[judeGibbons]

Hi @edent and others - have we come to a conclusion about this? There are several types of icon layouts:

1. the icon is a perfectly circular image on a neutral background (eg Chrome, OpenBenches)
2. the icon is white on a coloured circular background which is inherently part of the logo (OrcID, Ansible)
3. the icon is on a white circular background which is then on a full-bleed colour (Spotify, Wordpress)
4. the icon is a random shape on a white or coloured full-bleed background.

Those in category 1 have sometimes been treated differently to the others and I think this was a mistake (I did some of them!) I think they need to revert back to the original instructions, ie anything on a circle doesn't go outside the yellow 435px diameter circle on the template. The ones I've done in the past haven't been consistent but I'm happy to make them so.

[17jiangz1]

I think if we were to strictly follow the instructions, the main outer circle should align with the green 384px circle when possible for cases 1, 2, and 3, which is also in line with how Google treats their icons such as Chrome on the app store. The would also make it possible to be consistent with circular forms with protrusions (e.g. Samsung internet). I can also help out with the resizing if needed.