Update: Check out our stretch goals!
Want to dig right in? Check out our examples:
Whether you know it or not, you've probably seen Iconic. It's in use on thousands of websites, many of which you likely use everyday. We want to make Iconic even better by increasing the number of beautifully designed icons in the set as well as applying forward-thinking approaches to how icons are built, used and displayed.
Iconic is much more than just icons. We want to take as many of the best current ideas around iconography on the web, along with a few new ideas of our own and encapsulate it into an integrated icon system. Here's a laundry-list of what we'd like to do:
- 200+ beautiful icons—each designed at three individual sizes
- The collection comes in PNG, SVG, WebP and font formats.
- A subset of icons which respond/adjust to data—we call these Smart Icons.
- Well-structured semantic SVG; allowing you to easily style and adjust your icons similarly to how you'd adjust HTML.
- With Iconic's three-sizes, it allows you to show the right sized icon for the right screen size. We refer to this as Responsive Iconography.
- A full toolkit for production, customization and modification of your icons.
- A comprehensive set of documentation covering all the concepts and tools provided.
- All this for one simple price.
That's a lot to take in, so let's dig in to the details.
Three individually designed sizes for each icon
Just because an image is scalable doesn't mean it's legible at all sizes. Most visual elements have a sweet spot in terms of legibility—icons are no different in this regard. To achieve a significantly greater range of legibility, each icon will be designed with different amounts of detail to look great for three different size ranges: small, medium and large.
New approaches to icon display
We want Iconic to act as a catalyst for new display techniques on the web. A big part of this project will be creating and providing the tools and techniques to support this.
Here are some of the ideas and techniques we've been exploring for development:
The SVG format gives icons the freedom to extend well beyond the static imagery we currently expect. A subset of Iconic icons will be created with semantic elements and simple API hooks allowing for dynamic control of the icons and its elements.
Different screen dimensions often place unique requirements on a visual design. But screen size isn't the only attribute that has an impact on legibility. The same icon is often used at different sizes on the same screen. Iconic, with its three-size icon system, allows you the flexibility to adjust an icon dynamically based on the context of its use in your design for improved display and legibility.
Icon Styling: One icon, infinite possibilities
The advent of CSS marked one of the biggest leaps in possibilities for web design. SVG allows that same creative potential to be brought to vector imagery and iconography. To fully and usably take advantage of this functionality, icon elements must be well structured when created and designed thoughtfully.
Iconic is being designed with this in mind from day one which means the final SVG icons will be semantically clear and primed for styling. You will have a tremendous amount of control over styling to match your aesthetic needs—with just standard CSS that you already know and love.
We have even more tricks up our sleeve. We've been busy exploring, experimenting and pushing boundaries. 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 that would make our advanced display techniques simple and easy to use. The more funding we get, the more you'll receive.
A Full Open Source Icon Toolkit
Anyone who's worked with icons knows that customizing a full set takes time and effort. For icon designers, this is the most tedious part of their job. For designers simply looking to use icons, it's an unnecessary burden. This whole process is just begging for automation. We will develop an improved toolkit that can be used for any vector icons, not just ours. All tools and code will be open source and publicly available on Github.
This toolkit will include:
Helpful ExtendScripts to make Adobe Illustrator workflow easier
There are far too few resources for icon designers looking to speed up their workflow in Adobe Illustrator—especially when it comes to automating exports. Iconic will include open source ExtendScripts to make various Illustrator workflow processes faster and less error-prone.
Automated output with Grunt.js
If you haven't used Grunt yet, you're missing out. We love it and we're sure you will too. We will be using Grunt to create a suite of command-line automation tools which will use Iconic's SVG files to generate fonts, raster files, sprites, and various other permutations along with supporting CSS, LESS and SASS for styling.
We're packing a lot into Iconic; a lot of things that aren't even icons. We want this project to set new standards for icon use on the web and to help people use icons in new and interesting ways. The only way that will happen is if we do a good job explaining them. Our documentation will include: code-samples and guidance for all the many ways to use Iconic along with step-by-step tutorials on setting up and productively using Iconic's toolkit.
We also want this project to help you make better icons of your own, so included in the documentation will be tips and tricks to help you 1-up your icon design skills.
Bonus: Designing icons for wrangly subject matter
Iconic is going to include more than just the usual suspects. We're also going to be tackling subject matter that is difficult to convey in icon form. The hope is to help create new symbolic representations for subject material that either doesn't have a standard or has one that is grossly outdated*.
* Yes, the save icon will be redesigned…
How many icons?
Great question! The short answer: Ultimately it's up to you, the backers. The amount of icons we make depends on how well the project is supported.
The goal of Iconic is to provide the most forward-thinking icon set available, not to win an icon count contest. With each icon being created in three sizes the total number of icons effectively triples the size of the set (and the work for us!). Additionally, the icons are going to be built in a way that will prime them for animation, styling and other new interesting approaches. Rest assured, by reaching the project's $15,000 goal we will be significantly extending the existing set and, depending on your pledge level, you'll have the opportunity to influence the icons we create.
Why go commercial?
It's challenging to continually extend and support a project without some financial backing—especially on a project with such an advanced focus. Iconic is as much R&D work as it is icon design, and good R&D work is time intensive. We want Iconic to stay on the leading-edge of new thinking and technology and by generating revenue we'll be able to reinvest in its continued advancement.
What about the existing Iconic?
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. Any improvements to the icons currently in the set will be transferred to Open Iconic. The commercial version will simply expand on it. All the core tools you need will be GPL licensed as well. Ironically, by making Iconic commercial we will be able to make an even greater commitment to open source projects.
How will I be able to get Iconic after launch?
Once Iconic is finished, you will be able to buy the set (consisting of all icons, tools, techniques and documentation). As an added bonus, our static SVG icons will available after launch on The Noun Project ala-carte or through their new API.
Risks and challenges
As part of the Iconic development process we will be trying many unique and new approaches to icon design and display—some of which rely on newer technologies and possibly yet-to-be-widely-released browser features. In doing so, not all our ideas result in successful, well-supported features. This is part of the risk of trying something new.
We'll likely run into cases where some things will work most of the time for most icons, but not all of them on every browser, device and platform. Typical of many advanced web techniques and tools, our goal will be to identify those potential issues and clearly document them, along with possible workarounds and alternatives.Learn about accountability on Kickstarter
- (30 days)