How To Create Svg Icons In Adobe Illustrator

FileAdobe Illustrator CS5 icon.svg Wikipedia

SVG (or Scalable Vector Graphics) is a popular file format for creating simple and complex vector-based images. It’s especially useful for web and mobile applications, where it can be used to create icons, logos, and other graphics. And while it’s easy to create SVG files with a basic graphics program, there’s no better tool for creating high-quality SVG files than Adobe Illustrator.

Adobe Illustrator is a powerful vector-based graphics program that allows you to create and manipulate vector images with ease. It’s perfect for creating logos, icons, and other graphics for web and mobile applications. And with its comprehensive set of tools, you can create stunning SVG files with ease.

In this tutorial, we’ll walk you through the process of creating SVG files in Adobe Illustrator. We’ll cover everything from drawing basic shapes to creating complex icons. So let’s get started!

Step 1: Draw Your Shapes

The first step in creating an SVG file in Adobe Illustrator is to draw your shapes. You can use the basic shape tools to draw basic shapes, such as rectangles, circles, and stars. You can also use the Pen tool to draw more complex shapes.

Once you have your shapes drawn, you can customize them by changing their colors, outlines, and sizes. You can also add effects such as drop shadows, gradients, and transparency. This will give your icons a professional look.

Step 2: Group and Outline Your Shapes

Once you have your shapes drawn and customized, you’ll need to group them and outline them. Grouping your shapes will make it easier to manipulate them as a single unit. Outlining your shapes will ensure that they are saved as vector shapes in the SVG file.

To group your shapes, select all the shapes you want to group and then click the “Group” button in the toolbar. To outline your shapes, select all the shapes and then click the “Outline Stroke” button in the toolbar.

Step 3: Export Your SVG File

Once your shapes are grouped and outlined, you can export your SVG file. To do this, click “File” and then click “Export”. In the dialog box, select “SVG” from the drop-down menu. Then click “Export” to save your file.

When you export your file, you’ll be presented with a few options. You can choose to include a preview image and to export the file in multiple sizes. You can also choose to export your file as an “optimized” SVG file, which will reduce the file size and make it easier to use.

Step 4: Use Your SVG File

Once you have exported your SVG file, you can use it in your web or mobile application. To do this, simply add the file to your project and then use it as you would any other image file.

You can also use your SVG file with other graphics programs, such as Adobe Photoshop. To do this, simply open your SVG file in Photoshop and then use the tools to manipulate the image. You can also use the tools to add effects, such as drop shadows and gradients.


Creating SVG files in Adobe Illustrator is easy and can be done in just a few steps. With Adobe Illustrator, you can create stunning icons, logos, and other graphics for web and mobile applications. And with its comprehensive set of tools, you can customize your SVG files and make them look professional.

We hope this tutorial has helped you understand how to create SVG files in Adobe Illustrator. If you have any questions or comments, please let us know in the comments section below.