Icon Management: The Landscape and Future of Your Universal Visual Language
Managing and sharing icons with other product team members has always been a frustrating process. Designers are drowning in single use icons lazily drawn or found, leading to inconsistency in a product’s visual language. Tell me if this experience sounds familiar:
- Search for an existing icon in our product set
- Find nothing
- Search for another icon externally
- Find something almost there
- Redraw icon to fit with an internal style
- Add to Dropbox
- Send assets to developer during development
- Fidget with format, sizing, and layout in the browser or device
When it comes to good product design, the process for managing and sharing icons is just as important as the creation process. A product’s iconography serves as a universal visual language for users. Done right, that visual language can instantly clarify abstract digital concepts like moving from one space to another. To achieve clarity, consistency, and universality in a product’s iconography, a product team needs a way to manage icons at scale.
Today, icons are managed in different spaces: Dropbox and design files for designers, Github for developers, and the UI for users. This divergence causes a few problems for everyone. At scale, it becomes difficult for designers to “audit” an icon to see what contexts it lives in. It also becomes a chore for development when a team wants to change an icon across a product. These types of challenges weaken the experience for users downstream, resulting in a lack of uniformity in the visual language and sometimes multiple icons to represent the same concept. What if there were a single source of truth for everyone? A few months ago, I was determined to find a better solution to finding, managing, and serving icons. In the process, I uncovered some popular tools in the community as well as some trends toward the future of managing assets.
Icon Management Tools Today
To start, I wanted to get a better sense of how the design community manages icons by asking the Designer News community about their preferred tools and processes.
64 respondents in a brief questionnaire and comments in the DN thread suggested that designers use a variety of solutions to manage icons, but a majority still use a combination of a design file (e.g. Sketch, Illustrator) and Dropbox.
Our team at Inkling used to collect icons in a .sketch file, but it wasn’t ideal. The main problem with relying on a design file is that it walls off other team members from accessing assets. Developers have to depend on designers to export assets, which can be tedious when working across multiple platforms. This also walls off non-product team members who might want to use branded icons for marketing or presentations. Using design files as an icon repository also limits organization to one dimension, typically spread across one or multiple artboards. While this allows designers to easily scan through a set of icons under one category, icons might belong under multiple labels. For example, a designer might want to see what the visual language looks like for all “avatar” icons across multiple products, but design tools aren’t optimized for this kind of filtering. When this became more problematic for some teams, tools for icon management began to emerge.
Outside of design files, DN members use a combination of other tools that I’ve briefly evaluated:
- Tagline: Build and share libraries of visual assets with your entire team — all from your desktop.
- Create sets, tags, export different sizes/formats
- Good for both solo and collaborative use
- Option to subscribe to icon collections from the Lingo shop and The Noun Project, which updates with new icons
- Tagline: Iconjar gives you the ability to store all your icons in one place, just one click away.
- Create sets and tags to organize
- Pulls from local folder structure
- Good for just solo use, but might work in combo with Dropbox for collaboration
Icon fonts (e.g. Font Awesome)
- While there are many implementation benefits to icon fonts, its long list of disadvantages for the user experience, enumerated by Tyler Sticka, makes it a deprecated method.
Other tools / methods
- SVGS: a minimal Mac OS app for both designers and developers to manage locally stored icons.
- Icomoon: a web based app to host your icons and export to multiple formats.
- Grunticon: a JS task that generates CSS classes and data URLs for each icon.
- Zeplin: a native app for handing off pixel-level specs and assets to developers.
From the DN thread, Lingo seems to be the most popular for several good reasons: it provides a straightforward way to organize icons by sets and tags, it syncs across multiple machines for easy collaboration, and has a unique advantage of being a part of The Noun Project. Users can subscribe to icon collections from the entire design community to stay up to date on styles and new visual symbols. While Lingo does a fantastic job helping product teams manage and share assets, I still see some opportunities for a smarter, more connected icon management tool.
What is the future of icon management?
A truly single source of truth for storing icons provides a foundation for both efficient product development as well some interesting design possibilities. The first benefit to storing product assets in the same place — versus using both Github and Dropbox — is that it allows developers to easily make sweeping changes without creating a different source of icons. With the right tool, it also avoids the constant back and forth between design and development to get the right asset. One solution we’re exploring at Inkling stores assets in a shared Github repository, which builds into a simple web application that allows anyone on the team to view and search for icons.
Recent trends in tools like Framer and Figma also point to a future where the workspace for design and development merge into a shared space. Using something like Github as the single source of truth for both design and development allows product teams to take advantage of code to manipulate assets.
Storing stateful icons (e.g. on/off, checked/unchecked, loading) allows designers to add another dimension to visual design not just for pure aesthetics, but for clearer communication, emotion, and delight. Using a combination of React JS and SVG’s, we are now able to animate delightfully useful transitions between states or dynamically style visual symbols. There’s already interesting work being done with creative coding and React JS to manipulate SVG’s.
With a web implementation, a team’s iconography becomes a tool not just for design and development, but for a visual language across the entire company for presentations, marketing content, posters, and company swag. When everyone’s speaking the same language, it plays a small but important part in building a company’s culture. Whether it’s Lingo, design files, or your own internal tool, how you manage your assets is ultimately dependent on your design team’s culture, but my hope is we can build a system to help us all design more meaningful and delightful visual languages.
