Unit 2 Finding Your Passion Creating Icons

Step #6 Moving into Illustrator

Open Illustrator and use the information below to start a new file. Remember to save everything to your Google drive, not the computer.

  • File New>Web
  • Create 10 artboards
  • 24×24 pixels
  • Bleed:0
  • Under Advanced
  • RGB because its for the web
  • Raster top Screen (72)
  • Click on More Settings
  • Preview Mode: Pixel
  • Spacing 5px

Click the selection tool

Making sure the Properties panel is set to show the pixel grid, Guides, and snap options as shown. In the Properties, the panel uses a pixel grid to underpin the vector icons and turned on snap options for extra precision. You can turn off the settings anytime.

New File Setup
New File Setup



Properties Panel
Properties Panel

Begin creating your icon using simple shapes or using the pen tool. You can create a variety of shapes by overlapping simple shapes and using Pathfinder operations to add, subtract, merge, and so on.


To unify the appearance of the icons,

  1. First select them all. Since the icons shared the same fill and stroke color properties, chose Select > Same > Appearance.
  2. With your icons selected, you can change the appearance of the entire set by changing the fill or stroke colors.






To export multiple versions of each icon, choose

  1. Export > Export for Screens
  2. Select all the icons you wish to export.
  3. Choose where to Export them to, remember the Google drive.
  4. Check Open Location after Export.
  5. Under formats choose 1x – None – PNG
  6. Go to the 2x row and drop the 2nd PNG to SVG. Making sure all other rows are deleted.
  7. Click Export Artboard

You will see the folder where you exported the files pop up. The SVG files will not show – these are for the web. An SVG file format is a popular tool for displaying two-dimensional graphics, charts, and illustrations on websites. Plus, as a vector file, it can be scaled up or down without losing any of its resolutions.


  1. Create a Google Slide and title it “{Your Name} Vector Icon Book”. 
  2. Slide 1: Icon Set name (Apply Section Layout): {YourPassionName}
  3. Slide 2 is titled: Preliminary Sketches: List your 20 icons, and take a picture of the list with sketches.
  4. Slide 3 titled: Detailed Sketches: Take a picture with your phone and upload the pictures from today, (only 10 with grids, detailed)  to your google doc.
  5. Slide 4 titled: Color Swatches: It’s your passion set remember so choose either a monochromatic color scheme or maybe 2-3 colors to create a color palette. Find the HEX code. Grab a digital swatch and HEX code to your google doc.
  6. ADD NEW—->>>Slide 5 titled Icons: and place all the vector icons on the page individually.
  7. Upload the entire Google Slide to Google Classroom.