How to Create a Vector Light Bulb Icon with

Inkscape
Today we'll be learning how to create a vector light bulb icon with the free, open source vector program
Inkscape. We'll be following a Tango style of design for this project. Read on to learn more about the
Tango Desktop Project and to learn how to create this icon.
Republished Tutorial
Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site.
This tutorial was first published in February of 2009.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and
downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just 9/month.

Tango Desktop Project

The Tango Desktop Project is a set of guidelines that icon creators can use to make a consistent
appearance in their icons. It's most famously displayed in Linux distributions, but you might also notice
it in standalone applications, such as GIMP. Below, is a sample of the official Tango icons. We'll be
replicating this look.

Step 1
Create a new 48px by 48px canvas. By default Inkscape has a few undesirable settings for creating
icons. Go to the Document Properties dialog window and select the Snap tab. Uncheck the box next to
Enable snapping. Throughout this tutorial you'll need to occasionally use a grid to align the shapes to
the canvas. To enable the Grid select the menu item View > Grid (#). I used a grey background in this
tutorial to make things show up more.

Step 2
Now create a small circle near the top of the canvas and center it. It doesn't have to be perfect, you can
adjust it later. Note how it fits nicely between the grid lines. Convert the circle to a path by selecting it
then going to Path > Object to Path (Shift + Ctrl + C).

Step 3
Next we'll create the bottom part of the glass bulb that slopes into the metal socket. It may be beneficial
to use a reference image for this next step. Below is a generic light bulb image from sxc.hu.

To create the curved bottom path, select the Bezier Curves tool (Shift + F6) and trace or create a path
similar to the one pictured below by adjusting the various nodes.

Step 4
Combine the circle created earlier and the new path by holding down Shift and clicking on the objects
individually. Next, click the menu item Path > Combine (Ctrl + K). The two objects are now combined
into one and should look the same as the image below while in Edit Paths mode (F2).

Pay attention to the two yellow diamonds selected above. We're going to make intersections in the
circle near these two points. Make the intersections by double-clicking above the two yellow diamonds
on the border of the circle. Two new nodes should appear where you double-clicked.

Select the square node at the very bottom of the circle and press the Delete key. The path will be
changed slightly and the two yellow squares we made earlier should turn into diamonds. Select these
two diamond nodes and remove the path connecting them using the Split Paths tool in your toolbar.

The result is a light bulb shape with two gaps in the middle.

Combine the almost-circle with the bottom path by selecting one end of the circle along with one end
of the bottom path. Clicking Join selected endnodes in the Edit nodes toolbar and the two points should
fuse together.

Do the same for the opposite side.

Step 5
Now it's time to add a little color. I used a custom color palette as shown below (.pl included in the
VECTORTUTS PLUS source files). It's also shown below.

Select the light bulb shape and bring up the Fill and Stroke window (Shift + Ctrl + F). Select Stroke
paint and then linear gradient. A simple black to transparent gradient should show up as the border of
the bulb. We're going to change these colors. Select Edit... and change the two stop colors. I used
729fcfff as my first and 3465a4ff as my second, darker color.
Change the direction of the gradient path by going into Edit Paths mode (F2) and dragging the square
point of the gradient line to the upper left hand corner of the light bulb. Then drag the circle end to the
lower right hand corner. This is to create a consistent light source in the icon.

Next up is the Fill. Keep the Fill and Stroke window open and click the Fill tab and select Radial
gradient. I used ffffff56 as my inner color and 729fcfe3 for my outer color. You may notice both color

are slightly transparent. This is to give the illusion that the light bulb is made of a translucent material.

Step 6
Select the outline, copy it (Ctrl + C) and paste it onto the same location (Ctrl + Alt + V). This is going
to be the trademark inner highlight found in most Tango-styled icons. Delete the fill of the copied
outline and change the stroke to pure white. This will make it more recognizable.
Adjust the white stroke so it fits snugly on the inside of the blue outline. Remember to keep the shape
and 1px border. It will probably be necessary to manual move the nodes around to achieve a perfect fit.

Bring up the Fill and Strokes dialog again and in the Stroke tab select a linear gradient. The white to
transparent gradient colors that appear by default will work fine; so there's no need to change them. We
do want to change the angle of the gradient though, because our light source is in the upper left-hand
corner of the image. If the light source is in the upper left corner, the brightest spot on the object should
also be in the upper left corner.
Adjust the overall opacity of the white outline to 75%.

Step 7
Time to create the filament. Draw two lines near the middle of the bulb with the Bezier Curves tool.
Angle them towards the middle creating a V shape, then give each a gradient stroke. I used 9927aff to
ffffffff. The lighter color is on top because this is where the filament is burning and giving off bright
light.

Refer to the reference bulb earlier in the post and you'll notice the actual filament is the material

between these two wires. Since a 48px by 48px icon doesn't need too much detail we can simulate a
coil by making a wavy line. So once again select the Bezier curves tool and draw four points between
the V lines created earlier. Then drag the lines connecting each point downwards so we have three
shallow bowls connected together.

Make a new three-sided rectangle in the bottom part of the bulb with the Bezier Curves tool. The
rectangle only needs a top, left, and right side; leave the bottom open. Then drag the middle of the top
segment upwards to make a small arc. This object will be a small piece of glass inside the bulb that the
filament is wired into.

Open the Fill and Strokes dialog and give the new path a stroke color of d0bfacff. Then select the Fill
tab and give it a Linear Gradient going from ffffffff to ffffff00 (white to white-transparent). Change the
repeat drop-down menu to Reflected. Reflected means the gradient is displayed twice. Once on the left
side of the square end, and reflected on the right. I positioned the square point near the middle to look
like there is a reflection in the glass. Also, change the overall Opacity to about 50%.

Step 8
Select the original blue outline we drew for the light bulb in Step 1. It should be the bottom layer of
your image. Copy (Ctrl + C) and Paste it into place (Ctrl + Alt + V). Remove the stroke. Then give it a
fill of ffc803ff. This is going to be a nice yellow glow resembling the color incandescent lights give off.

Lower the overall opacity of the object to 26% and lower it to the bottom of the image by pressing the

End key.

Now to finish things up. Glass objects always reflect at least a small amount of light; spherical objects
often have hot spots where a concentrated portion of light is being reflected off of. Create a circle, or
more accurately an oval. Make the width slightly smaller than the length. Now rotate the oval by
selecting it, and while having it selected click on it again. The arrows around the perimeter should
change to rotational arrows. Click and hold one of the arrows in the corner and rotate the oval about
45 clockwise. Position the oval in the top left corner where the light source is the strongest. Then
lower the Opacity to 37%.

Step 9
The final part of the light bulb is the metal connector that screws into a light socket. Create a rectangle
connected to the bottom of the glass light bulb we just created. Then convert the shape to a path by
going to the menu item Path > Object to Path (Shift + Ctrl + C). This makes the shape editable.

Drag the top of the rectangle upwards to resemble an upside down bowl and the bottom of the rectangle
downwards. We're going for a 3D cylinder look.

Add two more equidistant nodes on the left side of the cylinder by double-clicking where you want the
nodes placed. Do the same for the right side, only place them between the nodes on the right starting
from the top. By mentally connecting the dots from left to right it should resemble a zig-zag pattern. I
added an overlay to help visualize the pattern.

We're doing this to create the screw shape of the light bulb. Arrange the nodes by moving and extruding
them till they resemble the image below.

Give the screw shape a Stroke color of d59600ff. Copy and Paste into place (Ctrl + Alt + V) a new
screw. Remove the stroke from the new screw shape and add a linear gradient Fill with the colors
ffd543ff and ffeca9ff. Remember to change the Repeat to Reflected to get the shine near the middle of
the screw.
The new screw with the fill should be slightly smaller than the screw below it. Resize the newly created
Fill object till the border of the object behind it is completely visible, similar to the process in Step 5.
We're doing this to make the corners of the border appear sharper.

Now move the two screw objects to the bottom of the image by selecting them both and pressing the
End key. Next draw the wedges/teeth/edges of the screw. This is a very subtle effect and we don't need
a big object to do this. Select the Bezier Curves tool and make an object similar to the one below. The
fill color is d59600ff.

Duplicate the object and move it down beneath the original.

Now to add a few final touches. Make two connected points with the Bezier Curves tool in the shape of
a bowl. Fill it with the color d0bfacff and a stroke of 5a5249ff and lower it to the bottom of the image
with the End key.

Draw an oval at the very bottom of the image. Make it about six times as wide as tall. Open the Fill and
Strokes window and Fill it with black (000000ff).

Then select a Radial gradient for the fill. Lower the overall Opacity to 30% and move the oval to the
bottom of the image. This is the shadow cast by the light bulb.

Final Image