✕
Design System — Icons
Role – Visual Design Lead
Our product design team undertook a comprehensive redesign of our design system — with each designer responsible for specific components. My focus included icons, illustrations, and text input forms. Our goal was to audit all internal use cases, conduct a thorough competitive analysis, create consistency across our platform, and conform to HIG/W3C recommendations. All while coordinating with our development team.
➝ Process
The Principle
Our icons are simple and friendly. They provide meaning and clarity for users when they use our product.
It is important that icons be used strategically — not overly used. They should draw attention to critical information.
Grid
Icons are created in a 40px artboard with 4px internal padding. The artwork should not exceed 32px.
Alignment
We always aim for pixel perfection. Use the approved grid as your basic guideline to snap the artwork in place.
Design elements align to the pixel grid
Avoid random decimal points
Stroke
For consistency across our platform, use a 2px stroke to create all icons.
2px stroke
Don’t use mix of stroke weights.
Direction
If an icon has diagonal shapes, our standards prefer a visual direction from bottom left to top right.
Bottom left to top right
Style
Our icons are designed in a flat style using a mixture of sharp edges and rounded corners. Line icons are the main style, but filled icons are used in certain cases. Avoid overly complex design elements, shapes, and perspectives.
Square terminals

Mixture of sharp edges and rounded corners
Filled vs. outlined: Use both filled and outlined icons depending the required context. For instance, a filled icon could be used to indicate that something is "on", while an outlined icon could indicate that something is "off".

Icons in circle: Make sure of WCAG2. Color icon on white | White icon on color | White icon on gradient | White line icon
‍
Same color family in circle icon
Avoid different color family in circle icon
Size
Our icons are commonly displayed at 32px (large), 24px (system default), and 20px (UMC). Icons do not exceed 72px. When an icon needs to be bigger, consider using an illustration instead.
Process
1. Audit
2. Define rules and styles
3. Make
4. Review
5. Document
1. Audit
To begin, I gathered the primary screens (on mobile and desktop) to identify all the icons used in the product. Our icon library for desktop existed, however, the mobile experience did not have a strong connection to the library. We found that designers typically handed assets to individual developers and did not organize them in a systematic way. We had several meetings with the DSYS engineering team to review the library. We collected duplicates, identified various sizes and usage examples, and started organizing.
2. Define rules and styles
After reviewing our existing icons, we highlighted what worked well or what improvements could be made., We identified where we use icons the most. I studied line weights, corners, and default sizes. I performed additional audits and explored various options which I presented to the larger group. Our product and marketing design teams collaborated to find the best solutions for consistency across the brand.
3. Make
After defining a process — Create a 40x40px artboard. Block with 4px paddings. Draw the ideal icon shape. Delete unnecessary elements. Convert to outlines — I have created 235+ icons to date.
4. Review
I work with a group of designers who expand the icon set and coordinate with them to review progress on a regular basis. I review icons with the engineering team to assure standards are maintained.
5. document
All icon work is being formalized and shared with Invision’s Design System Manager. Within the DSM documentation, we are recording all guidance and best practices pertaining to the development and extension of the icon library.