Skip to content

How to save SVG graphics and SVG icons

Mike Mai edited this page Jun 27, 2022 · 1 revision

Complex Graphics

  1. Start with a small artboard in the design tool (Adobe Illustrator, Sketch, etc.). Since this is vector, the dimensions don't have to be big. Widest side being 500px should suffice.
  2. Make sure all layers have been converted to objects, meaning there are no strokes and masks, only shapes with color fill.
  3. Set each object's fill color to a brand color (or a gradient with brand colors).
  4. Combine all objects if they visually connect (i.e. create one big shape).
  5. Save the SVG and then use imgoptim or another tool to minify it before handing it to a developer.

Bolt Design System Icons

Follow the 7 steps defined in the design system's docs.

Clone this wiki locally