How to create vector icons in Sketch

Creating a memorable icon is important for establishing the identity of your product. The perfect icon should be simple and elegant, without relying on clichés, and it should communicate the core purpose of your product. In this tutorial, I will show you how to start with a simple shape, and develop it into a realistic app icon.

Before you begin

Ideally, icons should be created as scalable vector graphics (SVGs), so that they can be used at any size without losing quality.  Many designers use Adobe Illustrator to create vector art, but I prefer to use Sketch by Bohemian Coding. If you don’t have Sketch (for Mac only), you can get a free trial, or buy it for a one time fee of $99.

Here are four icons I will show you how to create in Sketch (others coming soon). This article details how to create the lightning bolt icon.

iconrocket-electric-1Hexagon gem icon tutorialfinished-icon-green

 

SVG icon tutorials:

Links to the tutorials on creating the icons above can be found here:

» Part 1: Lightning bolt icon tutorial
Part 2: Colorful hexagon icon tutorial (coming soon)
Part 3: Gem hexagon icon tutorial (coming soon)
Part 4: Infinity loop icon tutorial (coming soon)

 

Creating a symmetrical lightning bolt shape using guide lines

  1. Open up Sketch and create a new artboard by going to Insert > Artboard. I created mine at 800px width by 600px height. Select the artboard and give it a name, like “lightning bolt”. I then gave my artboard a background color of #F0F0F0, however this is optional.
  2. Symmetry is crucial for icons. I recommend drawing red “spec” lines and circles to help guide our vector shapes. I like to use a bright red 1 pixel stroke with 50% transparency, so you can see thru them. It’s important that you keep these spec guides in their own labeled folder, so that you can easily turn them all on and off.
  3. Let’s start by creating the central shape of the lightning bolt. Begin by drawing two straight lines, and copy/pasting them to create a symmetrical rectangle. Then, add circles as shown below. Be sure to copy the lines and circles you created and duplicate them so that they are identical. Group all of the red lines and circles into a folder called “spec”.
  4. creating a lightning bolt icon - step 1

  5. Insert a new rectangle shape over the guides. Double click the shape and you will be given control of the corners. Drag them right into the intersection lines of the red lines. Decrease the opacity of the shape to 50%, and change the color to be brighter, in order to see it better over the lines. Alter the border on the shape to be inside, with a color of #001289, 20% opacity, and a thickness of 3.
  6. For this part, I assume you are somewhat familiar with the pen tool. If not, there are some excellent tutorials on youtube for learning how to use “bezier curves”. Pull in the corners where the red lines and the circle meet, as seen in my gif below. Make sure the inner curves are set to “mirror”, and the points around it are “straight”. You can double click a point to change it from “mirror” to “straight”. You should also be familiar with the “disconnected” curve option, which allows the curve on either side of the point to be adjusted independently, and it can be helpful when trying to make your shape fit perfectly over the spec lines.
  7. Choose a subtle gradient to replace the flat color fill. I suggest picking colors that are close to each other on the color wheel, such as the royal blue to indigo that I have here.
  8. creating a lightning bolt icon - step 2

  9. Next, let’s work on the top and bottom of the lightning bolt shape. I started by making the main center shape 100% opaque (bringing it up from 1/2 transparent), so we can see it better. Draw another redline spec that goes diagonally thru the shape.
  10. Create two perfect circles in the nexus of the new spec line, as seen below. This will give us a guide to trace rounded edges on the lightning bolt.
  11. Now create a new square shape. Double click the object to edit the path. Drag the corners to overlay the guide lines and circles, as shown below. You can make the object semi transparent so you can see the guide lines. Create a new point and use the bezier curves to round the edge of the shape around the circles we just created. Then, give the shape a gradient if you like. The colors I am using here are #6385ff to #0095d9. Then, do the same for the top point of the lightning bolt (or copy and paste the one we just created).
creating a lightning bolt icon - step 3

 

Adding lightning and shadow

  1. Now we add light and shadow to our basic shape. This step will really bring the icon into the third dimension. Start by creating a new rectangle object, and make sure the layer is just above the original shape we created (the thick base of the lightning bolt). You can drag it into position in the left-hand layers panel. Then, group the new rectangle and the lightning bolt base shape together.
  2. We now want to mask the rectangle inside of the base shape. Right click on the base shape layer in the left-hand layers panel and select the “mask” option. This will allow layers above this one to be masked inside of the shape. Now, the rectangle appears only within the bounds of the original base shape, which is perfect for creating lighting and shadow. You may need to also select “ignore underlying mask” on any other layers that you do not want to be inside of the mask.
  3. how to mask a layer in Sketch

     

    creating a lightning bolt icon - step 4

  4. Remove the stroke on the masked rectangle shape, and change the color fill to white. Rotate the object so it’s at the same angle as the lower edge of the base shape (you can use a straight guideline to help). Let’s add some curves to the shape to mimic the curves of the base shape. I like to use guide circles here as well to help define the perfect curves for our lightning layer. Once you have the guide circles, right click the white object to edit the shape’s path. Add points and adjust the bezier curves to make it follow the edge of the guide circles. Once you have it close enough to perfect, turn off your spec folder.
  5. I added a 3px gaussian blur to the white lighting layer. Note: This is optional. Adding a gassian blur can cause problems if you want to export the finished art in .svg format.
  6. Lower the opacity of the white lightning layer to between 10%-20%. Then, duplicate it several times and move it up to the right in your base shape. See the gif above for reference.
  7. creating a lightning bolt icon - step 5

  8. Let’s continue this technique to add more lighting to the icon, above the other lighting layers we have created. Follow the gif above by creating another masked rectangle, and then rotating and moving it to fill half of the base shape. Make it white, and bring down the transparency. Create a circle guide to define the bottom curve of the light layer. Adjust the shape path to match. Add a blur if you like. Then, do the same thing on a new light layer for the top edge of the shape.
  9. creating a lightning bolt icon - step 6

  10. Create new groups for each of the point shapes we created earlier. Use the same lighting techniques that we used previously: create a mask of the point shapes, insert new rectangle shapes, make them white, rotate and position them in your shape. Then, use spec lines and circles to get your lighting layers the way you want them. Decrease the opacity, and add a blur if you like. You can add shadows with this same technique, only using a black fill instead of a white one. I usually make my shadow layers even lower opacity than the light layers.
  11. Finally, you can add a stroke to the base layers (the center and the two points). I suggest a semi-transparent stroke with a thickness that looks right to your eye. In my example, my strokes are #001289 at a 20% opacity and a thickness of 3.
alternate lightning bolt icon

 

Final Notes: That’s it, you made it! If you like, you can alter your lightning bolt to have perfect cuts between the points and the base using the same techniques described above. I like this look as well. Questions or comments? Feel free to contact me or leave a comment below and I can help.


sf designer jackson walker