6 ms·

Show HN: CoreUI Icons – open-source icons with marks in SVG, Webfont and raster

238 points by mrholek 7y ago

deleted 7y ago
[deleted]
crazygringo 7y ago
Not related to this specific set of icons (they look great)... but I'm really wondering when the pendulum is going to swing back from line art to actual colors and solids again. I've found toolbars so much harder to read for the last decade than they were before, ever since flat design removed all color and solids and made everything look like squiggles of the same weight. Toolbar icons used to be much more easily distinguishable by color and shape and weight and shading. [1] How long is the ultra-flat design trend going to last...?! Is it a technological issue on the web at this point? Once we get complete browser support for color fonts [2], is that going to give us rich-color icon fonts? Because I just cannot wait. [1] http://www.mswordhelp.com/wp-content/uploads/2011/07/toolbar-in-word-2010.png http://www.mswordhelp.com/wp-content/uploads/2011/07/toolbar... [2] https://www.colorfonts.wtf/ https://www.colorfonts.wtf/
- ape4 7y ago
  Make Apple will introduce it and call it breakthrough ;)
  - smexy 7y ago
    And then every other company will tease them about it before following suit.
  - knolan 7y ago
    Emojis are at least colourful and shaded. Maybe if the set of them increases as the rate they are currently we can have them as icons in our UIs. And as the sibling post pointed out it’s all Unicode.
- kitsunesoba 7y ago
  Something that makes color icons harder to support is the presence of dark modes and sometimes choice of themes within light mode and dark mode. Where a single set of glyphic icons they can simply be tinted appropriately, but with full color icons you’ll need at minimum a base set for light mode and secondary subset with problematic icons adjusted to work under dark mode. It’s easy to solve from a technical perspective (in CSS there’s media queries, on Apple OSes Xcode has built in variant handling for images) but there’s still the extra overhead of creating the required resources.
  - mrholek 7y ago
    We're working on duo-tone icons, and we have to find the best solution for this problem. If you any ideas please let me know.
  - crazygringo 7y ago
    That's true, but most sites don't support dark mode anyways, and it's still not clear that dark mode will be widely adopted web designers. In any case, you're right there would just be a second font file for dark mode, so at least a user wouldn't have to download both. In any case, as of two months ago Chrome still explicitly has no plans to implement SVG in OpenType (despite support in every other major browser, and the request being 3 years old), so color icon fonts don't appear to be coming to the web as a whole anytime soon. :( [1] https://bugs.chromium.org/p/chromium/issues/detail?id=306078 https://bugs.chromium.org/p/chromium/issues/detail?id=306078
kerkeslager 7y ago
See also: Feather Icons[1]. [1] https://feathericons.com/ https://feathericons.com/
kerkeslager 7y ago
Does anybody have some font suggestions for matching this style? My ideal would have the following: 1. Even line thickness within each character (this matches the icon style). 2. This is a tough one: looks good with the same line thickness at different font sizes (i.e. if you increase font size, you decrease font weight). This allows you to match the line thickness of your icons with the same font at different font sizes. I'm not opposed to using a variety of fonts for different sizes, but that of course means I have to find different fonts that fit my criteria. 3. Serif. This significantly improves character differentiation in my experience. It is arguably a departure from the flat style, but sans-serif fonts are both harder to read, and also stale IMO--too much of the internet is Helvetica/Arial. 4. Available on most machines. I don't necessary mean pre-loaded, but availability from CDNs and common enough to be likely already cached would be nice. However, given I can serve this up from a CDN or include in apps myself, this is probably the least important criteria. The best I've found is Zilla Slab[1]. To me that looks great in the range of (weight:400, size: 24px) to (weight: 300, size: 40px), but smaller/larger than that, it becomes blurry/too "spindly", respectively on my screen. That's big enough for most applications, but for tooltips, icon labels, placeholders, etc. I'd like a smaller size. One consideration here is that serifs just aren't visible at smaller sizes, so maybe I need to relax that requirement. [1] https://fonts.google.com/specimen/Zilla+Slab https://fonts.google.com/specimen/Zilla+Slab
jacob019 7y ago
Lovely icons, but I have been finding it so much simpler to just use unicode characters when I need icons. I can't always find exactly what I want, but I can usually get close enough and the simplicity is sublime.
- ysavir 7y ago
  Agreed. [A-Za-z] are all the icons I need.
  - deleted 7y ago
    [deleted]
- mrholek 7y ago
  Thank you for your feedback
- app4soft 7y ago
  Same thing. Think as for now, everyone could edit CoreUI fonts manually and assign icons to any Unicode characters using FontForge[0] [0] https://github.com/fontforge/fontforge https://github.com/fontforge/fontforge
fierarul 7y ago
Oh, this is just the freemium offer for the "pro" version which is $99/$39 per user. Wish somebody would donate to the Tango iconset for a remake and a whole load of new icons.
ebg13 7y ago
As someone who disables webfont downloading, I hate when fonts are used for icons.
- mrholek 7y ago
  That's why you can use SVG icons
  - ebg13 7y ago
    No, it's up to the web developer to choose that. The person using the site doesn't get that choice.
- jessaustin 7y ago
  Why do you disable webfont downloading?
  - ncmncm 7y ago
    Slow and sans-serif loaded, in my case. I have directed by browser to use Linux Libertine in place of all web fonts, and have a much improved experience, bad icons notwithstanding.
  - rozab 7y ago
    Why do you think Google hosts all these fonts for free? Nearly every webpage today has a request to fonts.googleapis.com. Most adblockers don't even blacklist it.
    - packetslave 7y ago
      Not to get in the way of a good conspiracy theory, but Google Font requests don't include any tracking cookies.
      - Minor49er 7y ago
        You don't need cookies to track user activity across the web. If Google is using Etags for example for handling the caching of their web fonts, and if the user doesn't have the referer headers disabled, then Google can see who is visiting which page and when. There are other ways to achieve this too
Abishek_Muthian 7y ago
Congratulations. I was using similar project 'feathericons'[1] in my website, but later went on to use just the requisite couple of svg's directly with href. Reasons being, 1. JS, although OP project doesn't seem to need one. 2. Missing icons, e.g. Reddit was missing in feather icons. 3. Only few icons were utmost needed and that doesn't justify a library. I think the real use case for such libraries are websites were there are user generated content and they are allowed use such icons; then again with emoji's I don't know how many prefer this. On second thought, themes for CMS may be the prominent use case. [1]https://github.com/feathericons/feather https://github.com/feathericons/feather
- mrholek 7y ago
  We deliver our icons with all the build tools, so you can remove unnecessary icons and build your own set.
pssdbt 7y ago
Good to see more variety to things like Font Awesome and Feather, nice work!
- mrholek 7y ago
  I'm glad you like our icons. We're doing our best!

238 points by mrholek 7y ago

deleted 7y ago

[deleted]

Not related to this specific set of icons (they look great)... but I'm really wondering when the pendulum is going to swing back from line art to actual colors and solids again. I've found toolbars so much harder to read for the last decade than they were before, ever since flat design removed all color and solids and made everything look like squiggles of the same weight. Toolbar icons used to be much more easily distinguishable by color and shape and weight and shading. [1] How long is the ultra-flat design trend going to last...?! Is it a technological issue on the web at this point? Once we get complete browser support for color fonts [2], is that going to give us rich-color icon fonts? Because I just cannot wait. [1] http://www.mswordhelp.com/wp-content/uploads/2011/07/toolbar-in-word-2010.png http://www.mswordhelp.com/wp-content/uploads/2011/07/toolbar... [2] https://www.colorfonts.wtf/ https://www.colorfonts.wtf/

ape4 7y ago
Make Apple will introduce it and call it breakthrough ;)
- smexy 7y ago
  And then every other company will tease them about it before following suit.
- knolan 7y ago
  Emojis are at least colourful and shaded. Maybe if the set of them increases as the rate they are currently we can have them as icons in our UIs. And as the sibling post pointed out it’s all Unicode.
kitsunesoba 7y ago
Something that makes color icons harder to support is the presence of dark modes and sometimes choice of themes within light mode and dark mode. Where a single set of glyphic icons they can simply be tinted appropriately, but with full color icons you’ll need at minimum a base set for light mode and secondary subset with problematic icons adjusted to work under dark mode. It’s easy to solve from a technical perspective (in CSS there’s media queries, on Apple OSes Xcode has built in variant handling for images) but there’s still the extra overhead of creating the required resources.
- mrholek 7y ago
  We're working on duo-tone icons, and we have to find the best solution for this problem. If you any ideas please let me know.
- crazygringo 7y ago
  That's true, but most sites don't support dark mode anyways, and it's still not clear that dark mode will be widely adopted web designers. In any case, you're right there would just be a second font file for dark mode, so at least a user wouldn't have to download both. In any case, as of two months ago Chrome still explicitly has no plans to implement SVG in OpenType (despite support in every other major browser, and the request being 3 years old), so color icon fonts don't appear to be coming to the web as a whole anytime soon. :( [1] https://bugs.chromium.org/p/chromium/issues/detail?id=306078 https://bugs.chromium.org/p/chromium/issues/detail?id=306078

kerkeslager 7y ago

See also: Feather Icons[1]. [1] https://feathericons.com/ https://feathericons.com/

kerkeslager 7y ago

Does anybody have some font suggestions for matching this style? My ideal would have the following: 1. Even line thickness within each character (this matches the icon style). 2. This is a tough one: looks good with the same line thickness at different font sizes (i.e. if you increase font size, you decrease font weight). This allows you to match the line thickness of your icons with the same font at different font sizes. I'm not opposed to using a variety of fonts for different sizes, but that of course means I have to find different fonts that fit my criteria. 3. Serif. This significantly improves character differentiation in my experience. It is arguably a departure from the flat style, but sans-serif fonts are both harder to read, and also stale IMO--too much of the internet is Helvetica/Arial. 4. Available on most machines. I don't necessary mean pre-loaded, but availability from CDNs and common enough to be likely already cached would be nice. However, given I can serve this up from a CDN or include in apps myself, this is probably the least important criteria. The best I've found is Zilla Slab[1]. To me that looks great in the range of (weight:400, size: 24px) to (weight: 300, size: 40px), but smaller/larger than that, it becomes blurry/too "spindly", respectively on my screen. That's big enough for most applications, but for tooltips, icon labels, placeholders, etc. I'd like a smaller size. One consideration here is that serifs just aren't visible at smaller sizes, so maybe I need to relax that requirement. [1] https://fonts.google.com/specimen/Zilla+Slab https://fonts.google.com/specimen/Zilla+Slab

jacob019 7y ago

Lovely icons, but I have been finding it so much simpler to just use unicode characters when I need icons. I can't always find exactly what I want, but I can usually get close enough and the simplicity is sublime.

ysavir 7y ago
Agreed. [A-Za-z] are all the icons I need.
- deleted 7y ago
  [deleted]
mrholek 7y ago
Thank you for your feedback
app4soft 7y ago
Same thing. Think as for now, everyone could edit CoreUI fonts manually and assign icons to any Unicode characters using FontForge[0] [0] https://github.com/fontforge/fontforge https://github.com/fontforge/fontforge

fierarul 7y ago

Oh, this is just the freemium offer for the "pro" version which is $99/$39 per user. Wish somebody would donate to the Tango iconset for a remake and a whole load of new icons.

ebg13 7y ago

As someone who disables webfont downloading, I hate when fonts are used for icons.

mrholek 7y ago
That's why you can use SVG icons
- ebg13 7y ago
  No, it's up to the web developer to choose that. The person using the site doesn't get that choice.
jessaustin 7y ago
Why do you disable webfont downloading?
- ncmncm 7y ago
  Slow and sans-serif loaded, in my case. I have directed by browser to use Linux Libertine in place of all web fonts, and have a much improved experience, bad icons notwithstanding.
- rozab 7y ago
  Why do you think Google hosts all these fonts for free? Nearly every webpage today has a request to fonts.googleapis.com. Most adblockers don't even blacklist it.
  - packetslave 7y ago
    Not to get in the way of a good conspiracy theory, but Google Font requests don't include any tracking cookies.
    - Minor49er 7y ago
      You don't need cookies to track user activity across the web. If Google is using Etags for example for handling the caching of their web fonts, and if the user doesn't have the referer headers disabled, then Google can see who is visiting which page and when. There are other ways to achieve this too

Abishek_Muthian 7y ago

Congratulations. I was using similar project 'feathericons'[1] in my website, but later went on to use just the requisite couple of svg's directly with href. Reasons being, 1. JS, although OP project doesn't seem to need one. 2. Missing icons, e.g. Reddit was missing in feather icons. 3. Only few icons were utmost needed and that doesn't justify a library. I think the real use case for such libraries are websites were there are user generated content and they are allowed use such icons; then again with emoji's I don't know how many prefer this. On second thought, themes for CMS may be the prominent use case. [1]https://github.com/feathericons/feather https://github.com/feathericons/feather

mrholek 7y ago
We deliver our icons with all the build tools, so you can remove unnecessary icons and build your own set.

pssdbt 7y ago

Good to see more variety to things like Font Awesome and Feather, nice work!

mrholek 7y ago
I'm glad you like our icons. We're doing our best!