1. Design & Illustration
  2. Icon Design

How to Create Animated Vector Icons in Adobe Illustrator and Photoshop

Read Time: 14 mins
Scroll to top
Read Time: 14 mins
Final product imageFinal product imageFinal product image
What You'll Be Creating

Wondering how to make animated icons? Animating vector icons and designs is made easy with Adobe Illustrator and Adobe Photoshop. Just create simple flat icons and import them into Photoshop for simple GIF creation. In this tutorial, we'll create three animated icons and explore a couple of techniques for creating smooth, easy animations.

Need inspiration? Explore more incredible vector icons on Envato Elements. Once you learn how to make animated icons, you'll find all the resources you need on Elements.

12 Social Media Flat Line Concept12 Social Media Flat Line Concept12 Social Media Flat Line Concept
An example of vector icons you could be working with.

You might be asking yourself: can you animate in Illustrator? In this tutorial, you'll learn how to create an icon animation with Adobe Illustrator and Photoshop. You'll see how easy it is to create an Adobe Illustrator animation. Let's get started! 

What You'll Learn in This Animated Vector Icons Tutorial

  • How to draw an envelope
  • How to create different forms of the envelope
  • How to create a letter
  • How to animate the envelope
  • How to draw a chat icon
  • How to animate the chat icon
  • How to draw a camera
  • How to create camera animation components
  • How to animate the camera

1. How to Draw an Envelope

Step 1

Create a New Document in Adobe Illustrator. I'll be using Adobe Illustrator CC, but you can easily adapt these techniques and designs to earlier versions. 

With the Rectangle Tool (M), draw a light-blue rectangle. Select the bottom two anchor points with the Direct Selection Tool (A), and pull the Live Corners inward to round out those two corners. Use the Pen Tool (P) to draw a stroked line in medium blue that defines the opening of the envelope.

Draw the basic envelope shapeDraw the basic envelope shapeDraw the basic envelope shape

Step 2

Draw two lines either with the Pen Tool or the Line Segment Tool (/) that meet near the center of the envelope. Expand your strokes under Object, and use the Shape Builder Tool (Shift-M) to select the non-intersecting portions of the lines from the rectangle in order to delete them. This is our basic envelope object.

Draw two more lines to complete the envelopeDraw two more lines to complete the envelopeDraw two more lines to complete the envelope

Step 3

Copy (Control-C) and Paste (Control-V) the envelope design. Draw a triangle from one top corner to the other for the opening of the envelope. Select the triangle while holding Alt, and drag out a duplicate of the triangle. Rotate (R) it to create the opening of the envelope, and set the fill color to a darker blue. For the sake of this demonstration, my lines are missing from the design below, but they'll be used in the final version.

Create the flap and opening of the envelope with a triangleCreate the flap and opening of the envelope with a triangleCreate the flap and opening of the envelope with a triangle

Step 4

Now you should have two envelopes: one open and one closed. Our goal in the next section is to create several iterations of envelopes that bridge the gap between the closed envelope and the open envelope for our final animation. Group (Control-G) each of your envelope's components.

Open and closed envelopesOpen and closed envelopesOpen and closed envelopes

2. How to Create Different Forms of the Envelope

Step 1

Duplicate the open envelope. Use the Direct Selection Tool to grab the top triangle's top anchor point and drag it downward until it almost completely covers the dark triangle. Duplicate this envelope group and pull the lighter triangle's lower point upward a bit so the envelope looks as if it's opening more. We'll continue duplicating each envelope and moving the triangle upward until it's back to the starting point again.

Create multiple iterations of the envelope opening and closingCreate multiple iterations of the envelope opening and closingCreate multiple iterations of the envelope opening and closing

Step 2

In the end, including the closed and open envelopes, I have nine envelopes for my animated icon. You can check out the placement of the triangles and their anchor points below. Make sure each envelope is grouped separately so that they'll be easy to import into Adobe Photoshop later.

Group together your envelope componentsGroup together your envelope componentsGroup together your envelope components

3. How to Create a Letter

Step 1

Draw a light-yellow rectangle and Copy and Paste it over each envelope. The goal is to have the rectangle move upward in even increments as it's opening. I decided to go with seven rectangles for my design.

Draw rectangles over each envelopeDraw rectangles over each envelopeDraw rectangles over each envelope

Step 2

Select the first envelope and its overlapping rectangle. Using the Shape Builder Tool, select the portion of the yellow rectangle that intersects with the inside of the envelope. Delete the non-intersecting portion of the yellow rectangle so you're only left with a small triangle from the yellow rectangle. Repeat this technique on the other envelopes.

Use the Shape Builder Tool to define the intersecting shapeUse the Shape Builder Tool to define the intersecting shapeUse the Shape Builder Tool to define the intersecting shape

Step 3

Continue defining the yellow letter shape for each envelope. You can see what my letters look like with their corresponding envelopes below.

Define each letter with their coresponding envelopeDefine each letter with their coresponding envelopeDefine each letter with their coresponding envelope

Step 4

Draw several thin rectangles to simulate lines written on the letter. Align and Distribute the rectangles in the Align panel. Then, Unite them in the Pathfinder panel.

Draw rectangles to simulate writing on your letterDraw rectangles to simulate writing on your letterDraw rectangles to simulate writing on your letter

Step 5

Place multiple sets of rectangles over each envelope. Note how some letters show more lines than others. I've placed sets of rectangles on six of my nine envelopes.

place rectangles over each envelopeplace rectangles over each envelopeplace rectangles over each envelope

Step 6

Select the letter shape and the rectangles. Using the Shape Builder Tool, select the non-intersecting portions of each rectangle and delete them. Repeat this step for all of your envelopes.

Delete the rectangles from each letter using the shape builder toolDelete the rectangles from each letter using the shape builder toolDelete the rectangles from each letter using the shape builder tool

Step 7

Group each envelope and its components so you have nine separate groups in total. Now we're ready to animate our design!

Group each of your envelopes to prepare them for animatingGroup each of your envelopes to prepare them for animatingGroup each of your envelopes to prepare them for animating

4. How to Animate the Envelope

Step 1

Open Adobe Photoshop and create a New Document. Since we're creating a simple web graphic, I've set my Document Size at 72 dpi (there's no reason for a higher resolution since we're not printing our artwork), 250 px width, and 300 px height. You can create a larger or smaller file if you wish, and also crop your document whenever you need to do so.

In Adobe IllustratorCopy each envelope group and Paste it into your Adobe Photoshop document. If you want to resize your image without a loss in quality, paste each group in as a Smart Object. If you're happy with the size, Paste them onto a new layer as Pixels

Paste each object into your documentPaste each object into your documentPaste each object into your document

Step 2

Make sure each object is layered sequentially. Additionally, you'll want to select all nine layers and Align them to their centers and bottom edges.

Arrange your layers sequentiallyArrange your layers sequentiallyArrange your layers sequentially

Step 3

Open the Timeline panel and create a New Frame Animation. Starting with the closed envelope layer (hide the others), create a New Frame and set the frame's delay to 0.1 seconds. For each frame, unhide the next layer and hide the previous layer until the envelope is open. Then, set the delay at 0.2–0.5 seconds

Repeat the process of unhiding and hiding layers, but this time go in reverse order so the envelope is closing again. Make sure it's looped Forever so the animation keeps opening and closing.

Create your simple timeline loopCreate your simple timeline loopCreate your simple timeline loop

Step 4

Sit back and hit Play on the Timeline panel to watch your GIF loop. You can adjust your frame delays for a slower or faster GIF, as well as changing how long the closed or open envelope is seen in the Timeline panel. Let's move on to the other icons and additional techniques for animating.

Its mail timeIts mail timeIts mail time

5. How to Draw a Chat Icon

Step 1

Back in Adobe Illustrator, either in a new document or on a new layer, draw a circle using the Ellipse Tool (L). Then, create a small triangle overlapping the circle, and Unite the two shapes: this is your basic chat bubble. Draw three circles for ellipses to be used in the animation later.

Draw basic chat shapesDraw basic chat shapesDraw basic chat shapes

Step 2

Copy and Paste the chat bubble and Reflect it over the Vertical Axis. Change the second bubble's color to a darker hue. Scale the ellipses down so they fit into the chat bubble. Next we'll add some text.

Draw chat bubbles and their contentsDraw chat bubbles and their contentsDraw chat bubbles and their contents

Step 3

Draw or type out simple words like "hey" and "hi", either using a handwritten-style font you enjoy or by drawing each letter with the Paintbrush Tool (B) using a default calligraphic brush. Make sure any text or strokes are converted to objects and that each letter is a separate object.

Draw separate letters within your chat bubblesDraw separate letters within your chat bubblesDraw separate letters within your chat bubbles

Step 4

Type or draw simple text emoticons within the chat bubbles. Alternatively, you can draw emojis. It's your chat icon, and the overall style is up to you. In total, there are 14 separate components below: three ellipses, five letters, two chat bubbles, and four objects creating emoticons. Each one will be Copied and Pasted into a new document in Adobe Photoshop as a separate layer.

Complete your chat icon componentsComplete your chat icon componentsComplete your chat icon components

6. How to Animate the Chat Icon

Step 1

In Adobe PhotoshopPaste each of the 14 icon components into your document as new layers. Group like objects together in the Layers panel as I've done below: the components for each word, emoticon, ellipsis, and chat bubble. This keeps your document organized and makes animating your GIF easier overall.

Organize your layers panelOrganize your layers panelOrganize your layers panel

Step 2

I want my first chat bubble to come in from the left side. I've hidden all of the components except for the first chat bubble and placed it outside my document frame for the first Timeline frame. Within seven frames, I've moved my chat bubble to the center of the document from the left side. You can move and alter a layer for each new frame without affecting the frame before it.

Once the chat bubble is in view, I start the "typing" effect. Each ellipsis is visible one at a time within the first chat bubble, followed by the first message of "hi". Then I begin to slide the second chat bubble into the frame, while the first chat message (grouped together in the Layers panel as "hi") is reduced in opacity (by 20% each frame) in the Layers panel.

Creating the animationCreating the animationCreating the animation

Step 3

Here's a look at my Timeline panel for the entire animated icon GIF. I have over 30 frames in total, and most of them have a 0.1 second delay. Some components, like the ellipses, go "dot, dot, dot" at a 0.3 second delay, while the fading of words or typing of letters and emoticons is faster when possible. You can adjust your preferred delays as you see fit. You want the typing to be smooth and readable, without being too slow and choppy.

Check out the timeline panelCheck out the timeline panelCheck out the timeline panel

Step 4

You can check out my final animation below: the first chat bubble enters and starts typing, the second bubble responds, and both send emoticons and then move back out of the frame.

The final chat bubble designThe final chat bubble designThe final chat bubble design

7. How to Draw a Camera

Step 1

Now we'll make one last animated icon GIF that combines the ideas and techniques used previously.

In Adobe Illustrator, draw a rectangle. Select the top two anchor points with the Direct Selection Tool, and pull the Live Corners inward. Draw a second, darker rectangle below the first, and round out its bottom corners. Note that the second rectangle is smaller than the first, but both share the same width.

Drawing the camera baseDrawing the camera baseDrawing the camera base

Step 2

In dark gray, draw a thin rectangle for the instant film opening on the bottom half of the camera. Draw rounded rectangles and a circle for the camera's lens, viewfinder, and additional designs on the camera's face.

Add shapes to your cameraAdd shapes to your cameraAdd shapes to your camera

Step 3

Add a red circle and a dark, warm gray circle for the camera's button. For the lens, stack gray and blue circles on top of each other, alternating between dark and light. Use the Direct Selection Tool to push the top anchor point of the inner circle downward so the lens looks shiny (see the design below).

complete the camera designcomplete the camera designcomplete the camera design

8. How to Create Camera Animation Components

Step 1

For the shutter animation, I wanted a simple open and close animation. You can, of course, create more complex shapes if you want. For my shutter, I drew a dark-gray circle. Copy and Paste the circle and cut it in half (add a line segment horizontally across the center of the circle, and then Divide the two shapes in the Pathfinder panel).

Copy and Paste the two circle halves. Move each half away from the center and use the Direct Selection Tool to move the bottom two anchor points to squish up each circle half slightly. Repeat for six iterations that bring the shutter from closed to open. All six of these groups will be Copied and Pasted into the Photoshop document during the animation stage.

Creating the shutter animationCreating the shutter animationCreating the shutter animation

Step 2

Now we can work on the instant film. Essentially, you're drawing a series of rectangles that get larger and larger. Start with a thin, light-gray rectangle in the center of the lower half of the camera icon. After a couple of rectangles, you'll add a dark-gray rectangle to the light-gray one. Notice how they both get longer and longer as you go.

Create the film coming out of the cameraCreate the film coming out of the cameraCreate the film coming out of the camera

Step 3

Here's a final look at all of the camera components: the camera, the six shutter shapes, and the eight (including the one on the camera) film shapes. In total, I'll be copying and pasting 15 components into the Photoshop document in the next section. Let's animate this camera!

The camera componentsThe camera componentsThe camera components

9. How to Animate the Camera

Step 1

As with the icons before, Copy and Paste each component into your Photoshop document. I found it easiest for each icon to have its own document within Photoshop so that I was concentrating on one animation at a time. 

Group the shutter layers and the film layers in the Layers panel, above the camera layer. I started with the shutter animation: close and open the shutter so the lens looks as if it's blinking.

Animate the shutter of the cameraAnimate the shutter of the cameraAnimate the shutter of the camera

Step 2

Then, you'll want to animate the film going in and out of the film slot (alternatively, it can fall off the camera, as it really would). Once again, you'll cycle through each film component, one after the other, and then create a frame for each in reverse.

Animate the film coming out of the cameraAnimate the film coming out of the cameraAnimate the film coming out of the camera

Step 3

Finally, a quick note on saving your GIF files. Go to File > Export > Save for Web (Legacy) (Alt-Shift-Control-S) and select GIF from the drop-down menu. Limit the GIF to 32 colors or less, if possible. You can preview the animation, resize your file, and decide on the file's quality before hitting Save

Save your GIFSave your GIFSave your GIF

Step 4

Here's a look at my final camera icon in action!

The camera icon in actionThe camera icon in actionThe camera icon in action

Great Job, You're Done!

Whether you're creating a GIF with each frame drawn in Adobe Illustrator, manipulating components while in the GIF creation stage, or using a mix of both techniques, animating vector graphics is simple and fun.

The final icon setThe final icon setThe final icon set

Now you know how to create an icon animation with Adobe Illustrator and Photoshop! Share your creations and push these ideas to their limits to create a whole set of animated icons or even scenes ready for web publishing!

5 Vector Icons to Add to Your Collection

For more epic icon designs, head on over to Envato Elements, where you can subscribe to unlock thousands of high-quality design assets for a flat monthly fee! Check out a few of our favorites below!

1. Vibrant Vector Icons (AI, EPS)

Vibrant IconsVibrant IconsVibrant Icons

You're in for a tasty treat with this vibrant pack of vector icons! This pack contains 30 minimalist Illustrator icons suitable for various projects. Edit these icons easily using Adobe Illustrator, and make your designs pop with exciting colors!

2. Social Media Interaction Icon Pack (FIG, SKETCH, AI, EPS, PNG, SVG)

Social Media Interaction Icon PackSocial Media Interaction Icon PackSocial Media Interaction Icon Pack

Working with UI/UX kits? This download comes with a set of Illustrator icons with unique designs. Present social media interactions in a simple and visually appealing way. You can work with this pack in Illustrator, Figma, or Sketch.

3. PTR Hand Gesture Illustration Icon Set (SVG, AI, EPS)

PTR Hand Gesture illustration Icon SetPTR Hand Gesture illustration Icon SetPTR Hand Gesture illustration Icon Set

Give a more humane look to your design with these hand gesture Illustrator icons. This icon set is perfect for creating an Adobe Illustrator animation. After this tutorial, you can turn these into animated icons. You can use this set for a website or app design, social media greeting cards, or even textiles and paper printing.

4. Sweet Halloween: 325 Files (AI, EPS, PNG, SVG)

Sweet Halloween - 325 filesSweet Halloween - 325 filesSweet Halloween - 325 files

Can't wait for Halloween? Get this set of thematic graphic elements. With this download, you'll get three sets of candy-shaped letters and numbers, plus many kinds of sweets. Turn them into animated icons with the tricks you got from this tutorial. Create a Halloween-themed Adobe Illustrator animation with this pack.  

5. Design Thinking Icons (EPS, PNG, PSD, SVG)

Design Thinking IconsDesign Thinking IconsDesign Thinking Icons

This is a great vector icon set if you're launching a new business or app design. The vector icons included work well for describing services or illustrating ideas in a company presentation slide deck. Work with this set to learn how to animate in Illustrator. The sky is the limit! 

Now that you've learned how to animate in Illustrator, why not pick up some more design tricks in our tutorials and articles below:

Editorial Note: This post has been updated with contributions from Janila Castañeda. Janila is a staff writer with Envato Tuts+.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.