Iconic – An Icon System Designed for the Modern Web
useiconic.com
useiconic.com
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?
The advantage here is using multiple colors ... but the disadvantage is that you need to load the files individually.
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.
That's not right. It's a font. It will be scaled properly, same as regular fonts.
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.
You can read more about their intent at the original Kickstarter here: 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.
Regardless of poking holes in silly marketing language, Iconic is very impressive and I'll likely pay the $99.
Because it's marketing, and they can say anything?
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.
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.
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.
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 :/
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.
"How many icons will a website need before an abstraction like this is necessary to manage them?"
I say they are very necessary.
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]
[2] http://sass-lang.com/documentation/file.SASS_REFERENCE.html#...
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.
Actually asking! Not being a smart ass.
Edit: Speeling.
Check out a responsive SVG Test I did a while ago: http://staticresource.com/ballr-dev/svg and change the width of the browser.
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.
...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.
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?
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.
I still don't understand how this is enforceable. BUt at least we know have a ballpark range for the unlimited license.
So far the list out the added value over fontawesome I can see is:
- Multiple colors
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.
Or maybe I just like the name.
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
- Icon specific JS methods for state switching
- Delivery of detail-specific icons based on context
- Proper back-filling for accessibility (they're trying, at least!)
Edit: Lists...
>Unlimited use for personal, non-commercial projects. Go nuts!
Right, as if I'm going to pay $49 just to use your fancy icons which I can substitute with something similar for FREE, like fontawesome.
Seriously, who thought this crap out?
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.
http://i.imgur.com/HkgLgbZ.jpg
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 initially assumed the page was broken on mobile.
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.
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.
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?
If the target audience is a startup, it has to have a free option.
Startups are often in a position to get a return on investment from making their design stand out.
Fair enough.
> If you're not into business to make money, you're not in business. You're playing.
Businesses can also be non-profit or state run. "Making money" doesn't define whether you're playing or serious.
15-20$ would be okay.
respect existing standards. innovate later.
The floating roof, the windowless house and the chimneyless roof are all in widespread use. The + shaped window is a rarity.
have you ever used FontAwesome or ionicons?
i know they're not as "responsive" or multi-colored as Iconic BUT 49 bucks for PERSONAL use - get real!
I have nothing substantive or critical to offer to this discussion.
My only contribution here is praise and thanks for an Icon Font library that I very much appreciate.
good to know though, that there are people like you willing to spend