It’s been a busy three months since we last shipped an update for Iconic. We’ve received a ton of great feedback and requests from you all – we weren’t able to get to everything, but we’re headed in the right direction.
So, for those of you who may not see your desired icons in Iconic yet, take solace because we have a special treat for you. As mentioned, we’ve been busy cranking out a new product. It’s called Relay and we made it to simplify your team’s design communication process. Relay is in private-beta, but as an Iconic customer, we’re giving you early access. We'd love your support on Product Hunt today, and when you put in the email address you use with your Iconic account during sign up we’ll jump you to the head of the line! Pretty sweet, right?
What’s new in Iconic 1.9.0?
We received a lot of requests for sports-related icons, which as you see didn’t make it into this release. Those icons proved more difficult to draw at all three sizes than initially thought. We did’t want to push those icons out piece-meal, so expect them in version 1.10.0 or 1.11.0.
Updates to iconic.js
- Added support for re-enumerating element IDs for all the rest of the IRI references, including
radialGradient. SVGInjector already supported
This extends our support for addressing the issue of having multiple instances of the same SVG on a page where only the first element with that id ends up being referenced. Browsers often shortcut the SVG Spec and ignore elements contained in parent elements that are hidden, so if you hide the first SVG instance on the page, then all other instances lose their references.
More to come in version 1.10.0
We’re really excited to move forward with web components – and we feel comfortable building them out now that Polymer has settled into a 1.0 release. As always, we’ll continue to make new icons as well, so stay tuned!
It’s been a busy three months since we last shipped an update for Iconic. We’ve received a ton of great feedback and requests from you all – we weren’t able to get to everything, but we’re headed in the right direction. So… more
It's been a long time since our last update to Iconic, so we wanted to make version 1.8.0 substantial. We've added a whole bunch of new icons—many of which are based directly on your feedback.
Google Plus Icon (Finally)
I apologize folks, this one is on me. I was far too stubborn about adding the Google Plus icon based on the rumors of its demise. The Social icon now has Google Plus. Thanks for the patience on this one.
Plus Nineteen More Icons
While Google Plus easily was the most requested icon, we also added a bunch of others to the set as well. Iconic now has the Browser Full Page, Browser Viewport, Building, Carriage Return, Check Thin, CPU, Flow, Group, Keypad Mobile, Marquee, Menu Selected, Palette, Pilcrow, Plus Thin, Pointer, Screen Viewport, Share Social, Weight and X Thin icons.
Don't fret if you your requested icon isn't in this list—we'll keep pushing out new icons in subsequent releases!
Update on Iconic's Web Component Promise
We take our Kickstarter promises very seriously, so we have by no means forgotten about our stretch goal to deliever Iconic as a web component. The problem we're facing is that the technology is very much in flux as is the polyfill framework Polymer which we plan to build on top of. What we don't want to do is release our web components just to have them break on you the minute you upgrade Polymer (yeah, it's that much in flux at the moment). So we've been intentionally sitting on this piece to let the dust settle a bit.
More Coming Soon
We hope to have smaller, more frequent updates in the subsequent months. Our updates will likely be focused on adding icons based on your requests. Let us know what icons you'd like on Twitter—we look forward to hearing from you!
It's been a long time since our last update to Iconic, so we wanted to make version 1.8.0 substantial. We've added a whole bunch of new icons—many of which are based directly on your feedback. Google Plus Icon (Finally) I apologize folks, this one is on… more
It's been a long time coming, but we're very happy to announce the initial release of our Illustrator SVG Exporter and SVG Grunt Toolkit which delivers on a promise we made way back when Iconic was a humble Kickstarter project.
Two tools, one workflow
These two tools are intended to work together. The Illustrator SVG Exporter is designed to let you focus on drawing your vector assets and getting you out of the application as quickly as possible. The Grunt toolkit is focused on doing all the things Illustrator clearly isn't streamlined for—mainly super-fast color adjustments, asset export in different formats/sizes and prepping SVG for better CSS styling. You should never have to color and individually export your icons again.
Illustrator SVG Exporter
The Iconic team uses Adobe Illustrator for drawing our icons. It's a long way from perfect, but at the time we started building the icon set it had a significant advantage in script-ability. We built a fairly complex and bespoke Illustrator script for Iconic. Through the process of making (and using) that script countless times, we've put together a new tool for general use that we think is much faster and more elegant than its predecessor. I've been using it almost daily for projects and (while I may be biased) it's my go-to tool for exporting SVGs from Illustrator.
For the full skinny on the exporter, head over to the Github project page where you can read about how it works and how it can make your life easier.
We've made this tool open source under the MIT License, so feel free to use it however you'd like. We'd love to see someone port this script to Sketch. Feel free to hit us up if you have any questions.
There are a lot of automation tools focused on SVG at this point. We didn't want to release a "us too" toolchain which does nothing different than anything else out there. We also didn't want to make something unique just for the sake of being unique and in turn have it be useless.
The toolkit helps you work with SVG input files by normalizing, colorizing, styling and optionally converting to other formats. We've all gone through the laborious task of recoloring our icons, it's not fun. This will help make the process faster.
The coolest thing the toolkit does is it allows you to use CSS to color your SVGs and PNGs. This is great if you want to set different colors for different icons or multi-colored icons. Our Illustrator SVG Exporter uses layer/path names to generate IDs. Our toolkit converts those IDs to classes which you can use to achieve awesomeness.
Wow, that wasn't easy
Of all the promises we've made, this has easily been the hardest to define and package up. Our initial concept was to simply release our internal toolkit as an open source project. That seemed like a great idea at the time, but the further we got into actually making the toolkit, the clearer it became how much of a disaster that would be.
SVG has come a long way, but the tools we use to actually create them are inadequate at best. I could go on a long diatribe about how our tools are letting us down, but that's another blog post altogether. Much of our internal toolchain is built around fixing all the inadequacies of how SVG is typically generated so we can actually do all the stuff Iconic does.
Here's the rub, pretty much every vector drawing tool out on the market is "special" in their own special little way. So if we were to release our internal toolkit, we'd either force you to use the same vector drawing tool we use or make our toolkit fix the inadequacies of various drawing tools. Rock, meet hard place.
Instead of trying to recreate everything that our toolkit does (and doesn't do) well, we've tried to improve some basic workflow issues that still seem to be a slow, laborious process. Hopefully we succeeded, we look forward to you letting us know.
It's been a long time coming, but we're very happy to announce the initial release of our Illustrator SVG Exporter and SVG Grunt Toolkit which delivers on a promise we made way back when Iconic was a humble Kickstarter project. Two tools, one workflow These two tools are intended to… more
We have exciting news so we'll cut right to the chase... we've partnered with Zurb to make Iconic the official icon set of the newly-released Foundation for Apps. Twenty-four of Iconic's icons ship with the framework and will come with all the features which make Iconic what it is.
Why we did this
We're big fans of ZURB and what they've been up to all these years. We especially appreciate the aggressive adoption of new web technologies in Foundation for Apps. We think it only makes sense for a modern-web framework to use a modern-web icon set. Honestly, we made Iconic to be used and there aren't many better opportunities to get Iconic into people's hands than this.
How Iconic works in Foundation for Apps
After our initial discussions it was clear that the ZURB team wanted to use Iconic to the fullest. No arguments here! As our two projects continue to evolve we'll be working together so you get the full monty of Iconic's features in Foundation for Apps—smart, responsive and stylable. You can learn more about using them in the Foundation documentation.
Open source & commerical aren't enemies
We've mentioned this many times, but it bears repeating—we want as many people to use Iconic as possible. This is a great step towards making that happen. We can't give away everything for free, but we're proud to have 24 of our icons in such an important Open Source project. We can't wait to see what you do with Iconic and Foundation for Apps!
Here are a few resources you can check out to get up to speed with Zurb's thinking and goals for Foundation for Apps.
- A Sneak Peek at the Next Foundation for Apps
- There's Life Beyond the App Store
- Foundation for Apps: Motion UI is the New Flat
- Design Amazing Single-Page Apps with the New Foundation and Angular JS
Better tools for rapid prototyping lead to better design discussions resulting in better final products. We think it's all pretty exciting.
We have exciting news so we'll cut right to the chase... we've partnered with Zurb to make Iconic the official icon set of the newly-released Foundation for Apps. Twenty-four of Iconic's icons ship with the framework and will come with all the features which make Iconic what it is. Why… more
This is a big one folks—lots for us to share and lots for you to enjoy. We’ll skip all the pomp and circumstance so we can dig into the details.
What’s new in 1.7.0
8 new basic icons
If there’s an icon you want to see in Iconic, please head over to our Community and let us know. We take your feedback very seriously.
3 new smart icons
Our Shape icon is pretty cool if we do say so ourselves. You can choose the shape you want to display with
data-shape and then put in initials (ala Google Docs) with
data-text (2 character limit). There’s a lot more that we can do with this icon in future releases. Stay tuned.
Want to display an OS icon? The Platform icon has got you covered. Choose between Android, Apple, Linux and Microsoft with the
We’ve been wanting to create a closed eye icon (as have a lot of our customers). Now the Eye icon can be toggled between open and closed with the
New social icons
We’ve added Pinterest, Vimeo and YouTube icons to the Social icon. We plan to hold off on adding Google Plus, but let us know if there are any other icons you’d like us to add.
Iconic is designed for the web first and foremost, but we are always trying to find more ways to make Iconic more useful. That’s why we created an Illustrator symbol library. Now Iconic can be easily used in your static comps. There are a couple ways to import our symbol library—read Adobe’s docs for the full skinny.
On a side note, we’d love to support Sketch symbols too, but their symbol implementation has a bit left to be desired. Once it’s a little further along, we’d like to ship with it.
We're using an SVG mask element in the new Shape icon so we now make sure mask ids and their references are unique (like we already do for clipPaths) so we can safely use masked SVGs multiple times on the same page.
We're seeing Iconic being served up via more CDNs lately so we updated the regex that was matching SVG file extensions to allow for query strings on asset URLs, which is a common cache-busting technique used by CDNs. (Issue #17).
Our Connections icon had some misnamed classes. We’ve fixed that up.
Webfont-only purchase option
SVG is the future. Period. That said, we know that icon fonts are still heavily used. We also know that many people aren’t quite ready to go all-in on SVG just yet. That’s why we’re now offering the Iconic webfont separately for the low, low price of $39.
Our icon font is pretty awesome—in many ways it’s best of class. Read all about what makes it special.
And when you're ready we'll give you credit for your existing webfont license so you can also easily upgrade to the full Iconic system when the time is right.
This is a big one folks—lots for us to share and lots for you to enjoy. We’ll skip all the pomp and circumstance so we can dig into the details. What’s new in 1.7.0 8 new basic icons We’re listening to your feedback… more
You’ve asked for social icons. Man, oh man have you asked for them. Well, now you have them. Iconic 1.6.0 is the smallest release but provides the biggest impact for many of you. So get downloading!
What’s new in 1.6.0
Two (big) new icons
A lot of you use Iconic in ways we would have never expected. We thought the SVG format alone would work since all traditional approaches of serving SVGs can gzip files for you. We heard a lot of stories from folks serving up Iconic where that wasn't possible. In this case, SVGZ makes a lot of sense. So, Iconic now includes both SVG and SVGZ formats.
Our approach towards social icons
We knew that social icons were going to be crucial for people wanting to use Iconic. We didn’t want to jump into this part of the project without a plan.
Social is a single smart icon
We think it makes sense to bunch all the social icons and browser types into consolidated smart icons. To be honest, social “icons” aren’t icons–they’re logos. So better to cluster them into groups.
We didn’t adjust the social logos
We really wanted to. There would have been great opportunities to optimize the vector points for specific sizes. However, the logos aren’t ours to adjust and we would be crossing a line (both ethically and legally).
We didn’t (and won’t) add every social network
A lot of icon sets go crazy (in the scary sense) with how many social icons they add to their set. Iconic isn’t going to do this. We’re definitely open to adding new social icons based on your feedback, but we’ll be judicious in what gets in.
More coming soon
We’re making good progress on our toolkit and we have a lot more great features on the way. Stay tuned, more goodnesss is coming.
You’ve asked for social icons. Man, oh man have you asked for them. Well, now you have them. Iconic 1.6.0 is the smallest release but provides the biggest impact for many of you. So get downloading! What’s new in 1.6.0 Two (big) new icons… more