search

edent / SuperTinyIcons

Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
MIT License
14.68k stars 900 forks source link

Inconsistent Circular Icons #349

Open edent opened 4 years ago

edent commented 4 years ago

Circular icons have different radiuses (radii?) Screenshot_2019-10-26 edent SuperTinyIcons circles

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 commented 4 years ago
  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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.