Iconic: Advanced icons for the modern web
useiconic.com
useiconic.com
What we need is a DSL (some already exist) and a framework which defines shapes and forms and which can easily plug things together. Ie. we have _only_ code for all the icons and with a simple "make" run we get our customized sizes, colors, formats etc..
I've actually worked with Asymptote [1] a lot and it would be very easy (and elegant) to define them in that framework. Another candidate would be Scala who can define DSL's elegantly and could use many existing libraries to put out th EPS. It's sad that people invest $50k on something that is again flawed: Not editable, not open (truly) sourced, not line-based versioned (git).
I've been wanting to start something along this way ever since I saw fontawesome but I don't think I have the time to invest. Maybe some day...
if your concern is that the tools for creating OTFs and TTFs seem to be opaque, i would suggest you look at the UFO[1] specification which represents a font as a folder containing a series of glyphs which are, themselves, a highly domain-specific hybrid of svg and postscript. the AFDKO [2] added support for UFO last month(!), so there seems to be traction on that front. fontforge, natch, has supported ufo for quite a while.
the problem with picking on fontawesome is that for icon sets to work, they usually need to be consistent and it's hard enough to get people to agree to code style guidelines, much less visual ones which are wayyyy more philosophical.
in any case, if there's a takeaway it's to look at UFO, it will at least provide you with a free and transparent workflow, but how you manage that workflow will still be a challenge.
If you (or anyone else reading this) want to work on this problem, i'm happy to talk offline since i've been doing a ufo fork of fontawesome for work lately and have accumulated some domain knowledge on that front.
And with a framwork you can easily adjust the fonts to your liking. Rounded edges in general? no problem. Rounded arrows? No problem. All icons with background of gray? No problem. Compile to 173x294 pixels? No problem...
It's much much more flexible than any Illustrator format will ever be and it'll allow real collaboration and source code versioning. I think asymptote would be great candidate and it's very close to the DSL I'd like. The good thing is that most of it is also written in asymptote itself so it's very extensible (unlike some other graphics languages)
You can download the books for it for free (the "blue book" is the tutorial). I highly recommend it, along with the "red book" which is also useful for adding to your general programming language theory.
(Popular would be a stretch, I guess)
Nobody cares about your standards if meeting your standards doesn't benefit them. And the people actually creating stuff own Illustrator already.
It took me a few rewrite of this to boil down to this question. Why do you say they "aren't actually open source". I'm curious to know what you're referring to. Is it that AI spec isn't open source, the files generated aren't open source because they require a paid application to edit, or the files themselves are binary formats and as such, aren't "source" in terms of how we think of XML or code.
If Illustrator was made free tomorrow, would that be satisfactory?
No, even if Illustrator was open sources I would prefer to see real source code for icons. IMO Illustrator is over kill for something so (relatively) simple. Image a project on github that contains a very descriptive syntax, a hierarchy of re-usable shapes and which can be plugged together to generate custom icons. Then everybody can contribute to it with a pull request and we have true collaborative open sourced icon fonts.
I make resources like this regularly. You need illustrator, no half baked open source project even comes close to the features offered by Adobe's awful software. I don't use it because it's what everyone else uses, but because it's the best thing out there.If you forced me to use GIMP and an open source vector editor, I simply wouldn't have the tools.
Contributing non-code resources is hard enough without putting arbitrary limits like this in place.
What about SVG, is that a possible candidate? By proposing a new format, the real challenge is to have the graphical editors to use them. Expecting users to contribute graphics by markup isn't going to be much more productive in my opinion.
Some exist, there is very simple gnuplot. There is python matplotlib but it's a general purpose programming language and no DSL specific one. I think the closest is asymptote (which is very little known). Then is is processing but it's geared toward animations and also does mostly raster graphics. There is R which is mostly for statistics. Then there is TikZ which is awful since TeX was never meant to be a programming language so it'f far from a DSL.
I want to be able to describe shapes and extend them easily. I think Scala would be wonderful and somebody fluent in it could create a DSL and still allow extreme extensibility. We need a language which has multiple layers of API. One very low which can easily do lines, bezier curves and the usual. And then some higher APIs that allow _easy_ composition and intuitive transformations.
SVG is like PDF, a format to display but nobody wants to write PDF or SVG. It's no fun.
Infact - there are a number of browser based vector editors I believe. What would be very interesting is a github clone centered around providing preview, diff and edit functionality specifically for graphics. Another idea on the pile *sigh
"This includes support for emerging formats and technologies like Web Components, CFF, WebP, SVG 2.0, a top-notch, multiweight, unicode-mapped icon web font implementation, SVG animation and a powerful SVG DOM injection tool"
Now, that said, I've longed for an alternative to Illustrator. I like your thinking around the DSL, but because this is all inherently visual work, nothing will become widely adopted until the visual design tools supporting the standard are excellent.
Check out some stuff they do over at tex exchange:
http://tex.stackexchange.com/questions/tagged/tikz-pgf
You can also easily take existing SVG and extract the curve formats out, normalize them and integrate them in your project as a few arrays. You wouldn't start from scratch and have to redraw the github logo. You just put it into source code and things such as arrows you can draw with a few commands
If it requires a text editor, you just lost 95% of designers (conservative guess) and you won't get them back because you've shown that you don't respect how they work.
No doubt Illustrator is capable of exporting to SVG, and that is really an essential for any sort of web icons in the HTML5 age.
And, as is so common with open-source attempts at graphics software, nobody takes Inkscape seriously. Sorry.
The reason to use one icon set on a web page is that the icons look good together. Putting a bunch of different icon styles in one set defeats this. A good designer has the skills to bust out Sketch and make another icon in the same style if they need it, and then contribute it back to the set for consideration.
If you're not able to do this, there's always http://icomoon.io/app/ which lets you bundle icons from different sets into one font.
Hmm.
No new file format....
This is what I mean with DSL:
Hint: they use Illustrator. They're going to keep using Illustrator. They're not going to stop using Illustrator so you can have a marginally easier Github workflow.
That said...
The icon set at hand is based around SVG; while it claims to have a pile of 'open-source' scripts for improving the AI icon-generation workflow, I would imagine that you could load all the SVG files into Inkscape if that's your preferred vector editor, and build similar workflow scripts for it as well.
And if you want a DSL for graphics, check out Context Free[1]. It outputs SVG.
As long as we have the source and it is readable (hence my wish to use a DSL) people will contribute to it with pull request. The result of the kickstarter will not be contributable (except by a small fraction of people)
This can give you a slight taste of a well done DSL which can produce EPS:
http://www.piprime.fr/developpeur/asymptote/example-asy2d/ge...
Asymptote also knows structs and overloading
This is coming from an iOS engineer too.
1. Download current design file
2. Edit
3. Submit pull request
4. Repo owner downloads file
5. Repo owner figures out what has changed (somehow hopefully) and hopes nothing else was broken with the edit due to different versions, setups etc.
6. Repo owners accepts pull request (while the change cannot be seen in github since it can't diff .ai files).
Your "editing" of a graphic file is still 4 steps, there's not much being cut out:
1. Click edit. 2. Propose changes. 3. Owner decides nothing is bad, or messes up other parts of the design. 4. Owner accepts pull request (still can't see the files in Github, because there is nothing for viewing graphical diffs anywhere yet)
The great thing about hosting on github is that people can send pull request and you have real collaboration. That's alsmost impossible with Illustrator files. In reality many OSS is abondoned and change leaders or simply die. If you have a source that is accessible by 100% of the programmers (and with icons there is a huge crows who's interested) then your project probably won't die.
Want will the kickstarter accomplish? Sure it'll give you great quality icons, but then what? What if the project is delivered and put open sourced? Is it going to be maintained indefinitely? For 2 years? 5 years? What about in 10 years? Can we still use it?
But now we're really off topic, I'm just re-elaboration why open source (and line based source code) is better. I could also argue why documentation in Markdown is better than word for highly collaborative projects....
It's a bit vague about that, but if you go to the kickstarter page, note:
> [$35 pledge]: You'll get the entire icon set when it goes public in 2014. This is the least expensive Iconic will be—at least 50% off its price at launch. Well done, bargain shopper.
So they're planning on selling it for at least $70.
Or am _I_ confused about something? It is confusing; they need some straight up explanation of the licensing.
"Although this new version of Iconic will be commercial, it's important to state that the current open source version of Iconic will remain freely available."
so the version for which the kickstarter runs will be a new, commercial version:
- with a price >$70
- based/derived on the existing opensource iconic
- the icons in the opensource version will receive an update if they are also in the new commercial version
what i really miss tho is what kind of commercial license the backers/buyers receive for their backing.
If you click "Get Iconic", you are directed to the kickstarter page. No actual download anywhere that I can see.
They are extremely cool though, I love the animation and styling especially. The grunt integration looks great too. These really look like icons to make developers / designers happy
[1] Approx 30% of android users are still using < 3.0 http://developer.android.com/about/dashboards/index.html
[EDIT] At risk of side-tracking things, I am not sure on their stance on the "save" icon
Seems like the following are supported in Android 3.0 and above: SVG (basic support) SVG in HTML img element SVG in CSS backgrounds Inline SVG in HTML5 SVG SMIL animation SVG fonts
If I was going to use it, my concern would be for IE 8 on XP because XP cannot upgrade after IE 8.
You can use modernizr.js to test whether it is supported and create a fallback I suppose.
Yes, there is a considerable amount of people stuck on Windows XP for whatever valid or invalid reasons. No, I don't believe for a second that all of them runs IE.
↓
-
(with less spacing - HN formatting is odd)
...seems to the current thinking elsewhere.
I don't get this sentiment. Just because we think its outdated doesn't negate it's utility. If ain't broken, don't fix it.
Just like a floppy symbol. If you are young you wont understand it and need to be taught the meaning, the only possible part is the "memorable" test but...well, opinions and all.
It makes it harder to learn. And there will be more people learning to compute tomorrow than who compute today.
The save icon concept makes no sense to me either, it really doesn't represent anything related to save, maybe download but without the word "save" next to it I would not have associated the two (and to me looks like a copy of the Burton Snowboard icon https://www.google.com/search?q=burton&tbm=isch)
ie. the concept of "saving" will soon be obsolete
Google docs saves automatically all the time. They just keep flashing the message up at the top to reassure us.
and really, what kind of madness is it to demand that we have to keep telling the computer to "save" ? and save from what ?
I was really stoked about this icon set, thinking 'finally someone has done it, now we have an icon set for true responsive web develop without the hassles' - bummer. It would be nice if OP included 'current limitations' and 'roadmap' somewhere.
I guess it's back to pngs and media properties and/or icon fonts, 12% of the user base is too large to miss. It's still great to see what awaits us around end of next year. XP is definitely EOL somewhere next year, which will trigger a good chunk of companies to upgrade. Old Androids will hopefully wash out of the market as well until then - also I'd say their web usage shouldn't be that relevant, except if you target emerging markets.
update: here's the gittip page for FontAwesome creator, Dave Gandy. https://www.gittip.com/davegandy/
I'm not sure how I feel about animated/interactive icons like Iconic is proposing. I feel that icons should be very simple and single-purposed: that is, labelling information, acting as a signpost. But I'm intrigued to see what happens.
Well done. Consider it sold. I'm using it for my site.
"How would user interfaces look if we had no preconception of their analogies? No magnifying glasses for search; no cogs for settings. And then, with that tweet, I realised I had unintentionally focused on icons. It’s icons that are still the problem."
He seems to be making a leap I don't follow there. Why is the use of magnifying glasses/cogs a problem? Who are they a problem for? My 70 year old mother knows what they mean at a glance, as does my 7 year old daughter, and I doubt that many people in between struggle with their meaning.
Pictures often have more impact, and more visual appeal, than words. If I have to do a presentation and I create one that's nothing but words, my audience will typically be far less engaged than if I'd replaced most of the words with other visual clues.
And the same applies to icons. A big green tick is more immediate than a button with "OK" on it. I can spot a cog much more quickly in a screen than the word "settings" buried in a screen full of other words.
So what problem is "no icons" trying to solve?
You speak and read english because you're brought up with it around you. You don't need to know the latin roots for a word to understand it's meaning. The root meaning of an icon is not important, just the fact that it's a 'random squiggle' that is universally recognised regardless of context is it's strength.
You can remove all icons and just replace them with words such as 'save', but now you must translate them for all languages, and scanning for the word is slower.
However, interfaces packed with random icons which have no recognisable meaning - that is a terrible anti-pattern.
Wouldn't you argue that the floppy disk is a universally recognizable icon for saving? It's hardly misconstrued for something else, and with the exception of youth, it does make sense (without using it before) to a majority of the population.
At this point there's really no reason to replace the floppy with a squiggle or anything else. It is a virtually universally understood defacto standard at this point, so unless there is a super compelling reason to stop (and I can't think of any) we should just keep using it regardless of whether anyone actually uses floppies anymore or not.
That aside, "random squiggles" make terrible icons. There has to be some notable structure to an image for it to have meaning when it is placed alongside other images.
Eg. if you had a "random squiggle" for save and a "random squiggle" for load, even if the squiggles were pretty different and were used consistently, most people would have a very difficult time remembering which is which if they were actually just random squiggles, and not something with a more clear & defined structure.
Yes.
>Does she know what the floppy disk is though?
Possibly (she's into retro-gaming, and occasionally uses my Amiga). But it's not actually important because the icon means save. Anacronisms like that are a part of the way that language (both verbally and non-verbally) develop. I doubt that many people have ever written on a scroll. But using the word in the context of "scroll bar" isn't confusing as a result.
>Might as well draw a random squiggle and call it "save".
Except for the fact that we already have an image that means save that everyone understands. We could equally make up a brand new word for "scroll bar" to remove its anacronistic link, but what would be the point?
A iOS7 example, look at the browser icons at the bottom of the screen, a square with an arrow on top, two squares next to each other and two squares on top of each other...
Icons are not hieroglyphs, in fact the idea behind icons is the opposite. Icons trancend language and present a concept across language barriers. If you need to go to the bathroom in russia you will know which door to take thanks to an icon.
Hm? Egyptian hieroglyphs are not metaphorical ideograms but part of a "true" phonetic writing system. Nothing has been lost.
They're a problem for users who haven't used that interface before. Imagine a novice user grappling with binoculars and magnifying glasses.
Bad designers are the problem, icons are fine. Icons are more efficient. Reading the full word takes longer and recognizing an icon is something the primate brain has developed to excel at over millions of years, in the form of things like predators, prey and brightly colored, specifically patterned fruits shrouded in dense forests.
Pattern recognition runs deep. Icons aren't a problem any more than calling a search function "find" or "browse" or "look for".
> babby: The designers job is to choose sufficiently recognizable icons if they actually want them to be recognized.
You're both right. It depends whether you're focusing on the people using computers today or the (larger, but more distant) people learning to use computers tomorrow.
So, when you're looking for zoom do you want the binoculars or the magnifying glass? Or do you want something else, which you don't know yet?
Search is an empty magnifying glass next to/within a text field.
Knowing that you click on binoculars or a magnifying glass to look for things is absolutely no different to knowing to use the "search" or "find" option in a menu.
I understand why they're going for commercial licensing on top of the kickstarter, but it's a real shame if the new icons never make it into the open source project. I'm more than happy to pay for them if I'm using them commercially, but it would have been good if one of their stretch goals had been setting a chunk of money aside to feed the new icons back into the open source version for people to use in their projects.
What livicons lacks seems to be the semantic styling that Iconic offers.
Edit: Sadly, the page is down now.