Edit Icons in Vectr

You can find all of the icon files in your purchase download. If you like the look of the icons as is, you can simply use the PNG versions in your site design. If you would like to edit the colors and strokes of the SVG versions of the icons, you can use Adobe Illustrator or a free graphic design program like Vectr.

If you’re new to graphic design software, we recommend the free online app, Vectr.

Setup Page

  • Click Use Online to open a new page.
  • If need to add some whitespace around the icon (for use in columns in Squarespace for example), you can set a custom page size. We’ve set our page to 1000px by 350px. You can adjust this as you like depending on the aesthetic you’re looking for.
  • You can zoom in and out to see your page better by hitting Command +  and Command –
  • Drag the SVG format of the icon you would like to edit onto your page.
  • You can adjust the size of the icon by dragging a corner anchor.
  • Be sure to center the icon on your page.

Change Colors

  • You can select all artwork by clicking and dragging, or holding shift and selecting.
  • You’ll see a palette appear to the right of your page where you can change the color of the border and the background.
  • You can either use the color picker or paste a HEX code if you already have specific brand colors you would like to use.

Export Icon

  • Once you’re finished editing your icon, click arrow button in the top right corner.
  • Select your file format: To maintain the whitespace around the icon you’ll need to select JPG. For a transparent background select PNG.
  • To save an editable copy of your new icon select SVG. You can then open this file format in Vectr for future editing.
  • Click download once you’re happy with your settings.