search

iconify / icon-sets

150+ open source icon sets. Icons are validated, cleaned up, optimised, ready to render as SVG. Updated automatically 3 times a week.
https://icon-sets.iconify.design/
591 stars 56 forks source link

Dashboard Icons #58

Closed markus-li closed 1 year ago

markus-li commented 1 year ago

There's a set of icons very useful in the world of Dashboards, such as Homarr.

The SVG icons in that repo would be great to have access to, but the licensing may be an issue, this is what it says in the LICENSE file:

(Almost) All product names, trademarks and registered trademarks in the images in this repository, are property of their respective owners. All images in this repository are used by the users of the Dashboard Icons project for identification purposes only.

The use of these names, trademarks and brands appearing in these image files, do not imply endorsement.

What do you think, would this be a suitable set to add?

cyberalien commented 1 year ago

Sorry, but that icon set is terrible. Icons don't follow any grid, they are more like illustrations. They have different styles, different padding.

Just look at few icons: https://github.com/walkxcode/Dashboard-Icons/blob/main/svg/chromium.svg - icon with padding, which seems random https://github.com/walkxcode/Dashboard-Icons/blob/main/svg/uptime-kuma.svg - massive padding on sides https://github.com/walkxcode/Dashboard-Icons/blob/main/svg/traefik.svg - misaligned, padding on left side, part of image cut on right side https://github.com/walkxcode/Dashboard-Icons/blob/main/svg/firefox-nightly.svg - doesn't even work https://github.com/walkxcode/Dashboard-Icons/blob/main/svg/actual.svg - another mess that doesn't work https://github.com/walkxcode/Dashboard-Icons/blob/main/svg/caddy.svg - no padding, different design style

and so on. Those are randomly picked examples. Looking at actual icon code, it seems to be designed as illustrations with floating numbers in viewBox, shapes placed randomly not following any logic.

cyberalien commented 1 year ago

Also they do not have valid open source license. License provided in repository clearly states that it applies only to documentation and code. So icon set cannot be added Iconify because only icon sets with valid open source licenses are allowed.

markus-li commented 1 year ago

I definitely see your point, thank you for the detailed answer. Being a developer who knows very little about creating icons, how would I most efficiently go about creating an icon set of that type which is not ill-formed? Writing code to do it would not be an issue. I live in code, just not in SVG and icons. All would of course be dependent on getting a compatible license on all assets as well.

cyberalien commented 1 year ago

One important part that makes good icon sets different from illustrations is pixel perfect shapes. Most users use standard monitors that have 1 dot for 1 pixel, not high definition displays. So if icon is pixel perfect, it looks sharp when its size matches grid (such as showing 24x24 icon with 24px height). Illustrations and bad icon sets look blurry when scaled down to icon size.

Google have excellent guide for designing icons for Material Design: https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes

It also explains padding and why it is important.

I hope this helps.

markus-li commented 1 year ago

Yes, thank you, that is a great intro to what to consider, I'll see how I can sort that out with these types of icons. Since the icons are for open source projects in most cases, it should be doable from a licensing point-of-view.