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.
Another icon font like FontAwesome is Ionicons (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.
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/, 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.
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.
I'm actually OK with this. To shadowfiend's point, this is more than just a webfont or an SVG library. They're clearly focused on targeting the web component market, with baked-in icon "states" and the delivery of specific glyphs based on context. Seems really neat!
I don't know. SnapSVG.io was there first with their marketing slogan: "Modern features for modern browsers". That kind of discredits Iconic's "first and only" section of their slogan.
Regardless of poking holes in silly marketing language, Iconic is very impressive and I'll likely pay the $99.
Lurker here. Why is there so much pessimism in this thread... ?
I'm not familiar with all the font libraries out there. I use Font Awesome right now, and quite frankly it's nice for being free, but has limitations in other regards(like only being pixel perfect in multiples of 14...etc) It seems like a great alternative to what's out there (Different details at diff resolutions, internal colors being changed).
HN confuses me more and more every day. Upvoted to #1, but 99% of these comments aren't constructive.
I believe most of the problem lies between the disconnect of what the set promises and the marketing language used (new, exciting, revolutionary), versus what it appears to deliver (same, unimaginative, ugly). In that sense, the vibe is dishonesty.
My main problem with it is that it's ugly. It seems to attempt to solve functional problems while simultaneously completely failing at the main function of icons.
People are probably on the same page, but describing it in confusing ways.
Very much agree. I thought this was a super clever way to approach things, and was a little bummed to see the responses. But hey, there's no such thing as bad press! :/
I feel I am perhaps being too pessimistic, but I fear this trend toward this heavier, unused-feature filled web-- a mosaic of libraries that make web development or design better in X and Y way that really doesn't affect the end user that much, but largely increases the cost and speed of viewing a webpage, especially in places and countries without the high internet speeds the developers inevitably have.
How many icons will a website need before an abstraction like this is necessary to manage them?
If every icon has each element labelled with large prefixed classes (".iconic-camera-slr-lens-release"), this is going to be a lot of extra footprint for websites that have enough icons to make this useful.
Perhaps I am alone in thinking that colourful icons are somewhat noisy, and thus will be used only in designs where icons are prominent elements, and as such infrequently; with that frequency, they could even be individually coded for.
It's important to think about your performance needs before you add any kind of third-party dependency. In production, you might consider using IcoMoon to create your own font with just the icons you need. [1] This library provides everything you need to do that.
The predefined classes give you flexibility when you're developing, but there's nothing stopping you from using your own names. There's also @extend in SASS that allows you to mix in icon styles to your application's classes without adding duplicate rules. [2]
+1 for IcoMoon. I tried a few of the other icon compilation apps and IcoMoon is by far and away the easiest to use with the best selection. There are slightly snazzier apps out there, but they just weren't as flexible as IcoMoon.
Managing a sprite for even 10 different icons is a huge pain in the ass.
Let's say you need a light and dark version of each icon, that makes it 20 different icons. Then you want a small version, and a big version of each, that brings it to 40. Then you need a version of each for retina, those 10 icons are now 80.
A font icon library is a god send when dealing with all these different variations since you can make these changes in the CSS without updating any of the icon sources files.
Use an icon font generated by icomoon or the like. That does not require Javascript, HTML and CSS prerequisites, is only as heavy as the used constituent SVG elements and is well-supported.
i agree, but i think that ship sailed a long time ago... i think we passed the point where the speed of the internet is an embarrassing reflection on the programmers involved about 15 years ago now though...
the bugs in the browser layer alone are embarassing enough - let alone the sheer number of layers and volume of redundancy, bugs and resource spunking involved all the way down.
that moderately recent post about fixing memory usage in firefox by doing very common sensical and normal things instead of assuming memory is some kind of endless resource... i had to check it wasn't april 1st. their final memory footprint is embarassing let alone what they started with. :/
i can see the lapse of time between pressing a key and seeing a character... this was much less often the case in 1995 with 1% the horsepower - rose tinted glasses aside :/
and yet you managed to break through the sheer layers and volume of redundancy, bugs and resource spunking to make this post using your browser, using the same technologies you decry.
Of course visuals need to be balanced against load speed, but using this kind of thing will be much smaller than doing everything with bitmapped graphics. I agree that having JS for icons may be a bit much, but you could always just use it without.
Another thing that really bugs me is that with icon fonts, there's only one file to download. In this case, the user has to download each SVG file separately.
I backed this kickstarter and still absolutely love the implementation they came up with. I know the general concepts Iconic addresses have been done in some form or another but they make it so simple and beautiful that it puts them in a league of their own, IMO.
Pro: Responsive SVG with identified components addressible using CSS.
Cons: Wants Javascript. Uses Javascript-interpreted data-* attributes for basic semantic content like "which direction does the arrow point". Not Open Source.
Interesting, but not nearly as good as the existing alternatives.
The code should be simple enough to look through. Me the most exciting part to ME about this is that their SVG's have semantic architecture within them, so instead of like #shape3249 it would describe the shape it was so when you call it in your code you can remember high at you're looking at.
The dealbreaker for me with these icons and why I won't use them: not open source. It's not about the money, I'll gladly pay for somebody to make great stuff, but if I can't work with the licence they're under I have no NEED to buy them.
I'm using Streamline on my current project ( http://www.streamlineicons.com/ ), and I'd recommend it over Iconic if you're looking for a commercial-grade icon solution - it's more expensive, but well worth it. 2 sizes, separate resources for filled vs outlined which are well thought out and involve more than just "filling in" the outline version. No SVG, but various vector formats which can easily be exported to SVG via batch tools. And they seem to really be into supporting and extending their product, every update has been free and I've been notified in a non-spammy way.
...and no, I'm not affiliated, I've just had a very pleasant experience working with their stuff, IMO for a commercial product it's well worth the investment.
Streamline appears to be significantly cheaper if you're going to properly follow the license terms of 1 project/license that Iconic lays out. Though as I look at streamline's license terms they too seem kinda restrictive: I can't use more than 100 icons/project, not that I would (how many icons can a single app have after all) it's just such a strange constraint.
Just wondering, how do they know if you're using more than the requisite number of icons, or if (in Iconic's case) you use them for more than one project on a single license? I doubt Iconic (which from what I understand is just a three person company) has the resources or time to chase after these types of violations. Not to mention the original kickstarter had no such restrictions. So all they're doing is making theoretical criminals out of poor designers, or worse: loosing potential customers who can't afford to buy a new license for each project. In stream line's case it's even more bizarre; are they really going to go around counting the number of icons you use in your project? How do they even track if you're using a single icon?
Actually, the only Kickstarter backers who get an unlimited licence are those who pledged over $1000. The others get that standard pro licence.
From the FAQ[0]:
I'm a Kickstarter backer, what license will I receive?
Thank you! You made this project possible. All Kickstarter backers that pledged $35 and above will receive a full Pro license. For their extra generous support, $1,000 backers will receive an Unlimited license.
hey please feel free to add to the list if I'm missing something. I don't want to prematurely judge them, no one benefits from that really -- if you know something I don't, educate me
The biggest difference I see is that one is attempting to provide a full-featured solution and one is just a web font (albeit a really great one!).
The colors thing is...whatever. The thing that gets me excited about a solution like Iconic is that it seems like they're trying to target the web component/polymer cats (whether or not they succeed is just anecdotal from me - check it out for yourself!).
By this what I mean is they've rolled in literal states to many of the glyph collections. I think the login/logout icons are a really nice example of this (https://useiconic.com/icons/account/). Many of the people complaining that there is a reliance on JS I think don't really understand what's happening here. They're pre-packaging baked-in methods (in this case, setState) that you can roll into your login/logout functions. They're even (kind of, sort of), in-lining ARIA states to make these "buttons" (spans, really) readily accessible. Personally I would have taken it a step further and implemented proper ARIA button roles, but hey, it's still new!
The important take away for me is that, while I will never use this, I'm excited that we're starting to see packages that are more than just a collection of icon sets. Web components is still very "I can't wait!" to front-end, and this seems to bring it closer to reality.
Oh yeah, I REALLY liked what I saw when I looked into polymer. It looks like a radical shift in web dev that could actually happen, and would be amazing for reusability, and a whole lot of other things.
Hmnn so from what you said I gather that the items are:
- Trying to solve "I want to convey implicitly held information through images" rather than "I need some icons"
- Colors are cool
I think you'll find that is a terrible argument and isn't going to achieve your desired result. I personally use Free as in Freedom software. Which of course, doesn't require that it be free as in price, but usually is. So right now I'm sitting on probably millions of man hours of developer work and it hasn't personally cost me anything.
The problem isn't that I'm not willing to pay for software, in fact, I definitely am. It's just that I don't need to. Which is apparently the same for icons, since there are GPL licensed alternatives out there.
The irony of course is that I would rather pay for software released under the GPL then pay for a closed piece of software. But, by virtue of it being under the GPL, I probably don't need to pay for it.
Not everyone's like you. There are plenty of free chart/graph libraries, yet I paid for a Highcharts license. There are plenty of free editors, yet I paid for a Sublime license. If I wanted to use these icons in a product, I'd have no problem paying $49 for that either. I'm glad to see it on HN, and I bookmarked it as I haven't come across other icon sets where I could easily do multiple colors in one icon.
Eeeesh... I don't like the aesthetic at all. Most of the icons I saw were very ugly. I'm also skeptical of the benefit of "baking in" detail rather than tailoring for your size and layout. Sorry.
Look at the level of detail in the Bitcoin QR code in comparison to the bell or battery. They look like two or three different icon sets shuffled around.
Also, look at the responsive design for the microphone on the right. I scale it slightly larger, and the right icon appears. I hope you can disable the auto scaling, but I like the left icon more than the right, and for consistency, I'd like the icon and style to remain the same if I use it in multiple places, but different sizes.
I do enjoy the ability to set multiple colors per icon. That's one thing I'd like from my existing icon fonts, but I don't plan to make the switch when I feel the design is lacking.
Price isn't a concern, I spent $200 buying some beautiful icons for my existing project, then ended up switching to a free icon font at the last minute.
I disagree and happen to like the majority of the icons - besides the QR Bitcoin one. Also, not everyone who creates a website wants to or can spend time customizing their own icons specifically for the site. Even if I wanted to do that I don't think I have the knowledge or "eye" for it even though I have designed and developed many commercial websites over the years.
Lots of pessimism in this thread let me try to even it out a little.
I personally backed this when it was on Kickstarter for $35 and do not regret my decision. I have used FontAwesome in the past as well as a few other free alternatives. While the javascript-less-ness of FA is nice (Iconic has a webfont), the quality of the icons themselves and their level of customization comes no where near Iconic. Many people have mentioned the multiple colors on 1 icon but I haven't seen anyone talk about the ability to easily theme all icons with just a couple lines of css, which makes the multiple color thing more appealing.
Additionally, Iconic is available as Webfont and PNG if so desired. They are also working on a number of additional features that I find interesting (bottom of the features page https://useiconic.com/feature-index/), specifically ExtendScript for Illustrator and then generation via Grunt.
I am pleased with my $35 purchase and have no reservations about paying the $99 for a commercial license if it fits the project (like any icon set you choose!)...However, for those who haven't had a chance to try it I really wish there was a cheaper/free option for experimenting.
That was my thought as well. Turns out it's just decoration that "bleeds" over the edge of the screen. But it really does look like content to scroll towards.
Kickstarter backer here. Funny how critical everyone is as though there is no demand for something like this. Well, over 2000 of us disagreed before iconic was even delivered.
I've used Fontawesome, I've used Entypo, I've used Weblays, I've used the original Iconic. I think that this offering is a step above than all of those, especially in the web category (I use them in mobile too).
The only mistake here is the licensing, which I hope will change. It was not clearly stated during the Kickstarter campaign, and is actually against my expectations (though it appears some in the comments section had discussed this).
IMO, it should be non-tiered and unlimited commercial use.
That aside, wake up, this is useful.
Our designer would consider it, if the visible license options were not so restricting. Rather than make it "Limited to 1 commercial project", they should add a reasonable license solution that allows a team to use it for many projects.
Requiring JavaScript to view icons seems like a major downside compared to competitors that are plain font files like Font Awesome. Now the client has to download and execute the JS before seeing what might be important UI cues.
I'm not a UX designer, but do you really want your icons to change detail based on display size, rather than have a uniformity in display across devices? Wouldn't that increase the burden on the user to memorize more icons that they have to potentially interact with?
I know the detail scales on the icons are subtle, but intuitively I'd think it might make a difference.
Can a UX designer can give their thoughts on that?
I honestly don't think the target market is startups. I think it is freelance web developers or very small firms who wouldnt otherwise wouldn't/couldn't spend the time creating a unique icon set for a site.
Does it matter what it costs? Hacker News isn't "open source" news, and software is a business. If you're not into business to make money, you're not in business. You're playing.
I've found the Entypo [1] collection to be a more useful set of icons for small sizes. The glyphs are well drawn and have a very consistent style throughout. Well worth a look.
Forgive my ignorance ... What are the advantages of using icon systems such as Iconic & Fontawesome as opposed to using Unicode character codes. Maybe not all various icons are available in Unicode? And Unicode is geared towards language? thoughts?
Why does it show a waveform for "audio spectrum". Spectrum has no negative values, but imaginary values (which I'm sure the author is not aware of and are not represented like that).
This...is a criticism I can get on board with. It's interesting, they spent the time to add states to some of the icon sets, so why not add some ARIA roles and pressed states to cover all their bases. That would be an awesome precedent.
interesting but you lost me on the home icon. '+' shaped window with a door preferably with chimney - the iconic image that most people recognise on sight as a house. not some weird triangle on a square with an inverted v on top which maybe kinda sort of indicates a roof... but why is it separate?
for me it was the lightbulb. Really guys? How many people think of a compact fluorescent lamp's shape versus the traditional globe shape. So unnecessary but really like a lot of the other ones.
It's interesting - many icons we consider familiar and obvious today represent tech that's racing toward obsolescense. The traditional light bulb has a lot of history in mediums beyond computers, but it's on the same path as the floppy disk / save icon.
The Noun Project has been doing SVG icons for years (http://thenounproject.com). It's slightly harder, but you can change colors/resolution/etc.
Sites like FontAwesome (http://fontawesome.io) cover all the basic icons and are insanely easy to use
LivIcons does animated icons (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?