
Iconic – An Icon System Designed for the Modern Web - Anchor
https://useiconic.com
======
gkoberger
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?

~~~
shadowfiend
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-
advanc...](https://www.kickstarter.com/projects/207474036/iconic-advanced-
icons-for-the-modern-web) .

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
It literally says "The first and only icon system _created for the modern web_
" (emphasis mine), which is my problem with them.

~~~
kaishiro
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!

------
ookblah
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.

~~~
calinet6
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.

------
tshadwell
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.

~~~
rads
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] [http://icomoon.io/app](http://icomoon.io/app)

[2] [http://sass-
lang.com/documentation/file.SASS_REFERENCE.html#...](http://sass-
lang.com/documentation/file.SASS_REFERENCE.html#extend)

~~~
hippee-lee
The flexibility with icomoon it fantastic, once you get it wired into the app.
And the ability to add your own, custom svg's is very handy!

~~~
elpool2
Yeah, the ability to quickly make my own icons when the icon set I've bought
doesn't have exactly what I need is pretty awesome.

------
brianherbert
I haven't seen anyone mention the fact that this was successfully crowdfunded
to the tune of almost $100,000
[https://www.kickstarter.com/projects/207474036/iconic-
advanc...](https://www.kickstarter.com/projects/207474036/iconic-advanced-
icons-for-the-modern-web)

~~~
tehaaron
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.

------
JoshTriplett
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.

~~~
kaishiro
What _are_ the existing alternatives that have baked-in icon states and a
delivery of explicit glyphs based on context?

Actually asking! Not being a smart ass.

Edit: Speeling.

~~~
err4nt
It's simple enough to do yourself with your own icons. SVG is just in XML so
you can affect different things with CSS (don't require. JavaScript)

Check out a responsive SVG Test I did a while ago:
[http://staticresource.com/ballr-dev/svg](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.

~~~
kaishiro
Sorry, you misunderstood. Of course we can do it ourselves - that's nothing
new.

------
grumblestumble
I'm using Streamline on my current project (
[http://www.streamlineicons.com/](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.

~~~
vxNsr
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?

~~~
dan1234
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.
    

[0][https://useiconic.com/help#faq](https://useiconic.com/help#faq)

~~~
vxNsr
hmmm... thanks I was looking for that.

I still don't understand how this is enforceable. BUt at least we know have a
ballpark range for the unlimited license.

------
hardwaresofton
Really does seem like these guys are a day late and a dollar short.

So far the list out the added value over fontawesome I can see is:

\- Multiple colors

~~~
simlevesque
The number of details decrease when the screen gets smaller, this is new.

~~~
mikeg8
New and pretty underwhelming

------
aalpbalkan
Paying for icons? No thanks. I have
[http://fontawesome.io/](http://fontawesome.io/)

~~~
deluvas
>$49 Personal

>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?

~~~
dangrossman
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.

------
devindotcom
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.

~~~
User8712
Same, not a big fan of the design. I think it's because the level of detail
and weight between icons varies so much.

[http://i.imgur.com/HkgLgbZ.jpg](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.

------
Pxtl
I have to say, Chrome screaming and falling over and begging for mercy at the
sight of their icon listing page doesn't really bode well.

~~~
dan1234
There was a very noticeable delay before things were looking correct on my
iPad, too.

I initially assumed the page was broken on mobile.

------
tehaaron
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/](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.

------
joshka
Stuff below the fold, but I can't scroll is a little annoying.

~~~
toddmorey
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.

------
kylnew
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.

------
aberrant
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.

------
ssorallen
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.

------
eliot_sykes
How is this different to the original Iconic from the same designer?

[https://github.com/somerandomdude/Iconic](https://github.com/somerandomdude/Iconic)

------
julianz
"accute" is surely a spelling mistake (it's in the classes that are applied to
the arrows on the demo page). That would peeve me greatly.

------
mtalantikite
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?

------
betadreamer
The site is well made but I wont use this. As other mentioned, there are free
options out there.

If the target audience is a startup, it has to have a free option.

~~~
myhf
If the target audience is open source, 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.

------
jayvanguard
Why is a $49 product front page HN material? I think a lot of people are
clicking and upvoting thinking this open source.

~~~
robogrowth
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.

~~~
jayvanguard
> Hacker News isn't "open source" news

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.

~~~
robogrowth
I dont consider those business'. Theyre organizations. Which is fine and they
do great things.

~~~
dllthomas
But they're not "playing".

------
boggzPit
I like how they expose details of an icon as CSS classes, well structured. I
personally think its to expansive.

15-20$ would be okay.

~~~
Lauricio
I agree, maybe even less, especially when they have already collected 90K to
create it. [https://www.kickstarter.com/projects/207474036/iconic-
advanc...](https://www.kickstarter.com/projects/207474036/iconic-advanced-
icons-for-the-modern-web)

------
Springtime
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.

[1] [http://www.entypo.com/](http://www.entypo.com/)

------
sunraa
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?

------
ktzar
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).

------
erichurkman
The input fields are almost invisible on the 'buy' page.

------
brokenparser
They should've used something like stripe for the checkout, as there's a lack
of payment options. Oh well, guess they don't want my money.

------
CmonDev
I wish style was consistent: some icons have miniature details, while some are
super-simplistic. Windows Modern GUI icons are the best imho.

------
andyhmltn
Weird. I got the homepage up fine but now I just get a 404 error after going
to the tour page. Now if I go back I get the exact same page?

------
harrystone
Accessibility would be cooler than auto sizing.

~~~
kaishiro
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.

------
blablabla123
What about performance? How does it compare to, say, regular icons that are
combined within a CSS Sprite?

------
apunic
Slightly OT: 'the modern web' is native and mobile

------
jbeja
The scrolling in the website is chopy.

~~~
chrismorgan
In Firefox 30 (Nightly) on Ubuntu on a seven year old machine I see no
choppiness at all.

------
jheriko
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?

respect existing standards. innovate later.

~~~
mikeg8
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.

~~~
harlanlewis
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.

------
globalpanic
License page is missing

------
dsernst
This is so cool.

------
quickpost
awesome set.

------
thenerdfiles
I love Iconic !

~~~
flaxin
what you work there or something? have you bought their license?

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!

~~~
thenerdfiles
I use Iconic on my personal website. It was easy to implement.

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.

~~~
flaxin
i don't know, earlier you were the _only_ one who "praised" Iconic - that's
why i asked

good to know though, that there are people like you willing to spend

