When exporting svg, here are some tips to ensure svg is production ready and can be included.
Follow the design guidelines.
If in doubt about a design decision, reach out in the #design-systems Slack and we're available to help.
Meets technical constraints
Stroke cap, angles, spacing, and radii are visually consistent with existing product iconography
Appropriately filled vs outlined
Squares and rectangles radius consistent with product environment.
Irregularly shaped corners are curved consistently with other icons in the product environment.
Inner junctions do not have a radius consistent with other icons in the product environment
Icon does not communicate its meaning solely via color
Icon's subcomponents are sized to appropriate scale
Icon can be coupled with text and the overall meaning is improved
Icon conveys a specific meaning
Contextual mockup included in Ready for Review file
Remove white background from icon frame
Outline all strokes of vector shape
Merge/flatten vector (cmd + e)
Remove any unused points
Vector layer color set to icon.default
Name the icon frame to the correct icon name
Name is lower-cased and uses a “-” to separate the descriptors, a.k.a "kebab-case"
- Draw a 16 x 16 or 32 x 32 px artboard. 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.
- Place the icon squarely on the artboard, making sure it's aligned to the pixel grid.
- Expand all strokes Object → Expand.
- Select all overlapping shapes and click the “Unite” icon in the Pathfinder panel to merge all of the shapes together.
- Make sure the icon is at #000000 and has no additional styling.
- Select File → Save a Copy... from the top navigation.
- On the Format dropdown select “SVG”.
- Below Format select Use Artboard, then select either all or a range of artboards, depending on your need.
- Click Save.
- The SVG Options dialog will then open, and you should select the options shown below:
Make sure the preferences are the same as in the image above.
- Remove white background from icon frame
- Outline all strokes of vector shape
- Union shapes
- Merge/flatten vector (
- Remove any unused points
- Vector layer color set to
- Name the icon frame to the correct icon name
- Fuegoicons should be lower cased and use a
-to separate the descriptors, a.k.a "kebab-case"