Icons, and how to optimize them for the design system

Design

Have the icon shapes (white part) outlined and combined. This allows the system to set its colors properly and to be built properly. I did this using "Convert to Outline" in Sketch, and it is also available in Illustrator. This turns all of the shapes (lines, rectangles, etc.) into one path.

You can reference this article for a more detailed guide and explanation. How to create SVG-ready icon symbols in Sketch.

Development

1. Add SVG files to /static/icons
2. Run yarn svg to convert these icons to JS so they can be used in the icon system. This will also run every time when deploying.

The icon's name is the same as where it lives in /static/icons.

/static/icons/2horpanel.svg -> 2horpanel

/static/icons/social/facebook.svg -> social/facebook