Creating Svg Icons In Photoshop Cs6

CS6 Icons Redesign by Abrcrmbieguy87 on DeviantArt

The ability to create Scalable Vector Graphics (SVG) icons in Photoshop CS6 is a relatively new feature, and one that’s quickly becoming popular among developers and designers alike. SVG icons are easier to manipulate and scale than traditional raster images, and they offer more flexibility when it comes to creating complex designs. In this tutorial, we’ll show you how to create SVG icons in Photoshop CS6.

Step 1: Set Up Your Document

The first step in creating SVG icons in Photoshop CS6 is to set up your document. To do this, open Photoshop and click on File > New. Then, enter the dimensions for your icon, and select the “SVG” option from the drop-down menu next to the “Preset” field. This will ensure that your icon is created as an SVG file.

Step 2: Create Your Icon

Once you have your document set up, you can begin creating your icon. Depending on the complexity of your design, you may want to use shapes, lines, and other tools to create the basic structure of your icon. You can also use Layer Masks and other tools to refine your design. When you’re satisfied with the look of your icon, you can begin adding color and texture.

Step 3: Add Color and Textures

To add color and texture to your icon, you can use the Brush tool or the Paint Bucket tool. Additionally, you can use layer effects such as Drop Shadows to give your icon a more refined look. When you’re happy with the color and texture of your icon, you can move on to the next step.

Step 4: Export Your Icon

Now that your icon is complete, it’s time to export it. To export your icon, click on File > Export > SVG. This will bring up the Export As SVG dialog box. In this dialog box, you can choose which parts of your icon you want to export, as well as the size and resolution. Once you’ve made your selections, click on the “Export” button to save your icon as an SVG file.


Creating SVG icons in Photoshop CS6 is a great way to create more complex and flexible designs with less effort. The process is relatively simple and straightforward, and with a bit of practice, you’ll be creating stunning SVG icons in no time. So, give it a try and see what you can create!