5 ms·

How can they say it's the "first and only icon system created for the modern web"? The Noun Project has been doing SVG icons for years (http://thenounproject.c

How can they say it's the "first and only icon system created for the modern web"? The Noun Project has been doing SVG icons for years (http://thenounproject.com http://thenounproject.com). It's slightly harder, but you can change colors/resolution/etc. Sites like FontAwesome (http://fontawesome.io http://fontawesome.io) cover all the basic icons and are insanely easy to use LivIcons does animated icons (http://livicons.com/#demovideo http://livicons.com/#demovideo) I guess they're cool, but they're not innovative enough for their overly boastful slogan -- unless I'm missing something?

andrewmunsell 13y ago
Well, the icons are responsive. They increase and decrease in detail depending on their size.
- maratd 13y ago
  So does http://fortawesome.github.io/Font-Awesome/ http://fortawesome.github.io/Font-Awesome/ and many others. The advantage here is using multiple colors ... but the disadvantage is that you need to load the files individually.
  - deleted 13y ago
    [deleted]
    - rtfeldman 13y ago
      Not multicolor within a single icon, though. I think the tagline goes too far, but they do have a legitimate edge there.
  - kpapke 13y ago
    Fontawesome icons can be set to any color you want with CSS. EDIT: My mistake, the website was down but I see now how it has multiple colors in the same icon. I would still stick with FA though.
  - usaphp 13y ago
    FontAwesome icons are not responsive. They always show the same graphic no matter of a screen size.
    - maratd 13y ago
      > FontAwesome icons are not responsive. That's not right. It's a font. It will be scaled properly, same as regular fonts.
      - rquantz 13y ago
        Not sure if you got that this new icon set actually changes the image to be more legible at different sizes by showing different amounts of detail. The big microphone has more dots on it than the little one.
      - eskimobloood 13y ago
        The point is that the icons come in 3 sizes, so a small icon has less details, then a large one, this is a feature missing in the most icons sets: http://blog.useiconic.com/designing-iconic-across-different-sizes/ http://blog.useiconic.com/designing-iconic-across-different-...
- TrainedMonkey 13y ago
  That is built into svg, so Noun project would be "responsive" as well.
  - cscheid 13y ago
    Not resolution. detail.
    - TrainedMonkey 13y ago
      Good point.
  - inportb 13y ago
    How, without some clever javascript (in which case you might as well use something like iconic)?
shadowfiend 13y ago
They didn't say it's created for the modern web, they said it's the first designed for the modern web. It may still be a bold claim, I don't know, but there's certainly more thought put in here than in many other icon sets I've seen. If you see what they've done with the icons, they've thought through a variety of use cases and the various facets of those use cases. There are SVG icons that can have both styling and behavior applied to them via data- attributes, but there is also an icon font. You can mix and match these at will where it makes sense. You can leverage the technology that makes sense in places where it makes sense, perhaps using a slower but more flexible version (SVG with data- attributes using their JS library) of the icon in a place where you need the flexibility, while using a faster-to-download version (icon font without any JS) in places where speed is tantamount and the extra functionality can be omitted. They've also designed for the fact that these icons will be useful both at small sizes and at large sizes, by providing different designs at smaller sizes that are more fine-tuned to that size. See, for example, https://useiconic.com/icons/account/ https://useiconic.com/icons/account/, and click the icon to show the three different sizes at the same scale. You'll notice the strokes are of different thicknesses, so that the smaller icon sizes look better. In the font, the three different sizes instead correspond to different weights of the font, so that you have that same flexibility there. The icons themselves are also programmatic objects, so for example the account icon from above can be switched from log in to log out mode in the same SVG file by invoking a method or setting an attribute, if you want to do that. Or, you can use the icon font, in which case they are separate (and inert). The intent (if it isn't already done) is to implement these as Web Components where supported, I believe. The icon font's stylesheet is provided in LESS, SASS, and Stylus formats so users of different people who use different systems can customize as they desire. They also intend to open source their toolchain for producing the icons, supposedly both helpful Illustrator scripts and helpful Grunt tasks for auto-generating various types of files for the icons. You can read more about their intent at the original Kickstarter here: https://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web https://www.kickstarter.com/projects/207474036/iconic-advanc... . I don't work for them, I just contributed to the Kickstarter and have been following along. They've done a great job of doing just about everything they've promised, and in a pretty fantastic timeframe.
- gkoberger 13y ago
JelteF 13y ago
Another icon font like FontAwesome is Ionicons (http://ionicons.com/ http://ionicons.com/). In my opinion they look better when displayed at a large scale, since they have more detail. That ofcourse makes them a bit ugly when used at a smaller scale, but I mostly use them in combination with FontAwesome icons.
- tylerlh 13y ago
  I've been doing the same. A combination of FontAwesome and IonIcons has worked pretty well for me.
coldtea 13y ago
>How can they say it's the "first and only icon system created for the modern web"? Because it's marketing, and they can say anything?
- izzydata 13y ago
  Just like how every movie is the funniest movie this year according to critics.
zobby 13y ago
Hey, Bitch, that's a shameless commercial product advertising, bitch!
barrkel 13y ago
FontAwesome doesn't work for me because I don't enable custom fonts.

andrewmunsell 13y ago

Well, the icons are responsive. They increase and decrease in detail depending on their size.

maratd 13y ago
So does http://fortawesome.github.io/Font-Awesome/ http://fortawesome.github.io/Font-Awesome/ and many others. The advantage here is using multiple colors ... but the disadvantage is that you need to load the files individually.
- deleted 13y ago
  [deleted]
  - rtfeldman 13y ago
    Not multicolor within a single icon, though. I think the tagline goes too far, but they do have a legitimate edge there.
- kpapke 13y ago
  Fontawesome icons can be set to any color you want with CSS. EDIT: My mistake, the website was down but I see now how it has multiple colors in the same icon. I would still stick with FA though.
- usaphp 13y ago
  FontAwesome icons are not responsive. They always show the same graphic no matter of a screen size.
  - maratd 13y ago
    > FontAwesome icons are not responsive. That's not right. It's a font. It will be scaled properly, same as regular fonts.
    - rquantz 13y ago
      Not sure if you got that this new icon set actually changes the image to be more legible at different sizes by showing different amounts of detail. The big microphone has more dots on it than the little one.
    - eskimobloood 13y ago
      The point is that the icons come in 3 sizes, so a small icon has less details, then a large one, this is a feature missing in the most icons sets: http://blog.useiconic.com/designing-iconic-across-different-sizes/ http://blog.useiconic.com/designing-iconic-across-different-...
TrainedMonkey 13y ago
That is built into svg, so Noun project would be "responsive" as well.
- cscheid 13y ago
  Not resolution. detail.
  - TrainedMonkey 13y ago
    Good point.
- inportb 13y ago
  How, without some clever javascript (in which case you might as well use something like iconic)?

shadowfiend 13y ago

They didn't say it's created for the modern web, they said it's the first designed for the modern web. It may still be a bold claim, I don't know, but there's certainly more thought put in here than in many other icon sets I've seen. If you see what they've done with the icons, they've thought through a variety of use cases and the various facets of those use cases. There are SVG icons that can have both styling and behavior applied to them via data- attributes, but there is also an icon font. You can mix and match these at will where it makes sense. You can leverage the technology that makes sense in places where it makes sense, perhaps using a slower but more flexible version (SVG with data- attributes using their JS library) of the icon in a place where you need the flexibility, while using a faster-to-download version (icon font without any JS) in places where speed is tantamount and the extra functionality can be omitted. They've also designed for the fact that these icons will be useful both at small sizes and at large sizes, by providing different designs at smaller sizes that are more fine-tuned to that size. See, for example, https://useiconic.com/icons/account/ https://useiconic.com/icons/account/, and click the icon to show the three different sizes at the same scale. You'll notice the strokes are of different thicknesses, so that the smaller icon sizes look better. In the font, the three different sizes instead correspond to different weights of the font, so that you have that same flexibility there. The icons themselves are also programmatic objects, so for example the account icon from above can be switched from log in to log out mode in the same SVG file by invoking a method or setting an attribute, if you want to do that. Or, you can use the icon font, in which case they are separate (and inert). The intent (if it isn't already done) is to implement these as Web Components where supported, I believe. The icon font's stylesheet is provided in LESS, SASS, and Stylus formats so users of different people who use different systems can customize as they desire. They also intend to open source their toolchain for producing the icons, supposedly both helpful Illustrator scripts and helpful Grunt tasks for auto-generating various types of files for the icons. You can read more about their intent at the original Kickstarter here: https://www.kickstarter.com/projects/207474036/iconic-advanced-icons-for-the-modern-web https://www.kickstarter.com/projects/207474036/iconic-advanc... . I don't work for them, I just contributed to the Kickstarter and have been following along. They've done a great job of doing just about everything they've promised, and in a pretty fantastic timeframe.

gkoberger 13y ago

JelteF 13y ago

Another icon font like FontAwesome is Ionicons (http://ionicons.com/ http://ionicons.com/). In my opinion they look better when displayed at a large scale, since they have more detail. That ofcourse makes them a bit ugly when used at a smaller scale, but I mostly use them in combination with FontAwesome icons.

tylerlh 13y ago
I've been doing the same. A combination of FontAwesome and IonIcons has worked pretty well for me.

coldtea 13y ago

>How can they say it's the "first and only icon system created for the modern web"? Because it's marketing, and they can say anything?

izzydata 13y ago
Just like how every movie is the funniest movie this year according to critics.

zobby 13y ago

Hey, Bitch, that's a shameless commercial product advertising, bitch!

barrkel 13y ago

FontAwesome doesn't work for me because I don't enable custom fonts.