How Kickstarter helped bootstrap my new icon set

“If you build it, they will come.” — Field of Dreams (1989)

Imagine that you are a designer and have the idea for a new icon set. In the normal flow of things, you would then put metaphorical (and/or literal) pencil to paper and create said icon set. Once finalized, you export and package your new icon set, and then release it to the world. From there, anything is possible. Perhaps a few hundred sets are sold. Perhaps sales explode and the icon set is bought by millions of people. Perhaps it, and by association you, gain fame and notoriety when it’s included in the operating system of the first, fully-autonomous artificial intelligence. Perhaps that AI goes on to enslave humanity. In short, anything can happen.

And yet, all of the above eventualities begin with first creating icons, and then selling icons. With Symbolicons Pro, I wondered if it would be possible to flip the equation. Sell my icons, and then create them? I wanted to create a massive new icon set, but had to balance the time needed to create thousands of icons with my other client work. What would I need to be able to devote myself fully to the creation of Symbolicons Pro for a set amount of time?

“I wonder if they’ll show up before I build it?” — Jory Raphael (2017)

Enter Kickstarter.

The platform of Kickstarter provided a unique opportunity to test the viability of a new Symbolicons icon set, and to really gauge if there was enough interest to support its creation. The goal was simple, but grand. Symbolicons Pro was envisioned as a culmination of all the knowledge I’ve picked up over the past decade of icon design. In many ways, this is the icon set I’ve always wanted to create.

Before launching the campaign, I built 100 icons, in both a solid and line style as a proof of concept. These initial icons allowed me to start to get a feel for the style of Symbolicons Pro, and had the added benefit of providing actual icons to the Kickstarter audience so it wasn’t entirely smoke and mirrors. I filmed a quirky little video, put together images and copy for the campaign itself, and then proceeded to reach out to everyone I knew, and many people I didn’t, to spread the word. By the time the campaign ended, we had almost sextupled the original funding goal. It took a few days to lift my jaw from the floor.

Building Symbolicons Pro

With the Kickstarter campaign funded, I embarked on the monumental task of creating Symbolicons Pro. The scope of this project is larger than any of my previous icon-related endeavors, and documenting my process became key to ensuring its success. The base icon set will include over 2,000 icons, thoughtfully divided into distinct categories. Each category will contain only 30 icons. No more, no less.

“I guess I need to build it now.” — Jory Raphael (2017)

1. New Document.

To begin Symbolicons Pro, I created a new Adobe Illustrator document with 66 artboards. Because of the size of the set, it’s important for me to be able to see all of the icons in one place as I build them. This makes it easier to get a sense of how the icons fit together and whether or not they’re visually creating a family and style. On a more practical note, it also allows me to quickly move an icon from one category to another. It often feels like a large puzzle.

The dark icons are more or less complete. The green icon categories are still being finalized, and the grey icons are still WIP.

2. Grid

For Symbolicons Pro, each icon is built on a 24px grid. To accomplish this, the Guides & Grid preferences are updated to have gridlines every 24px with 24 subdivisions. This ensures that the document grid matches precisely with the pixel grid.

Occasionally it’s important that a particular piece of an icon end up on a half pixel. When dealing with those, I’ll change the subdivisions to 48. “View > Snap to Grid” is your friend.

3. Artboard Size.

Each artboard is set to 568px by 568px, which allows for 48px spacing between each icon and 72px spacing between the icons and the artboard edges. The spacing here is slightly arbitrary, but has a pleasing amount of whitespace.

4. Organization.

Because Symbolicons Pro was envisioned as an evolution of Symbolicons in general, it’s been important to have icon parity with my existing sets. To achieve this, icons from those sets were copied into the new document, and then loosely organized into categories. This process formed the basic skeleton of Symbolicons Pro. From there I started translating those old icons into the new, refined style.

An example of the icon updates from Symbolicons Color and Block to Symbolicons Pro.

5. Creation.

As categories began to take shape, I designed new icons to fill in the gaps, bringing each category to 30 icons each. Beyond the initial intuitive categories, I’ve been adding new categories based on suggestions from my Kickstarter backers, research into other industries, and popular trends.

Each icon in Symbolicons Pro shares a consistent styling, so that all icons fit together as a family.

6. Exporting.

Because Symbolicons Pro is being organized into categories, I made the decision to use a separate file for exporting icons. This “export” document contains thirty distinct 24px by 24px artboards and uses the same grid system as the larger, master Symbolicons Pro file (with 48px spacing between artboards). This allows for easy copying between files with spacing intact. After naming, these artboards are then exported using Illustrator’s “Export for Screens” feature.

7. Alternate Styles.

Though the solid style of Symbolicons Pro is being released first, I’ve also begun working through the icons in both a line and color style. These alternates are are being built within the same Illustrator file, on separate layers.

By keeping separate layers, it’s easy to toggle them on/off to get a sense for level of completion.

8. Release Symbolicons Pro.

Once I’ve completed Symbolicons Pro — I’m nearing completion of the solid style at time of writing — it’ll be released to all Kickstarter backers and then available on Symbolicons.com. The individual category packs will also be uploaded directly to Iconfinder.

9. Prevent the Singularity.

With any luck, Symbolicons Pro will be included in the user-interface of the first fully-autonomous artificial intelligence. And due to the friendly nature of this icon set, that AI will decide that enslaving humanity doesn’t sound like much fun. Instead, it will gain a love for acoustic guitars and pursue a career in folk music.

P.S. A note about using Adobe Illustrator

The simple truth is that you can use any number of programs to create icons, and I’ve tried many. But I always come back to Adobe Illustrator. It has been my tool of choice since the first Creative Suite was released in 2003. And with each update, there seem to be new features aimed directly at icon designers like myself.

Before live corners where introduced, creating rounded corners on icons was a total PITA. https://twitter.com/sensibleworld/status/492060776815796224

100 Artboards

But there has always been one limitation within Illustrator that has flummoxed me. Until now, each document has had a strict 100 artboard limit. For most people that limit is fine. For icon designers, it can be beyond frustrating.

Wrangling icons within that 100 artboard limit is not only time consuming, but it often hinders creativity by breaking icon sets into multiple files.

With the latest Illustrator update, these nine separate files can become one single file.
https://twitter.com/sensibleworld/status/382493709197406208
https://twitter.com/sensibleworld/status/403577107668029440

1,000 Artboards

Last month, Adobe released a new version of Illustrator, and with it a massive bump in the artboards. To say the 1,000 artboard limit is a welcome upgrade is an understatement. I spend every day working and crafting within Adobe Illustrator, and though it’s a seemingly small change, it’s one that will have a huge impact on my workflow.

But enough about my process. I need to get back to designing icons.

Freebie! By the way, you can download a free sample pack of Symbolicons Pro in both solid and line styles.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store