Tutorial: Designing an Icon Library Using a Grid in Adobe Illustrator

—

by

admin
in ,

In this tutorial, I’ll guide you through designing an icon library with a grid in Adobe Illustrator. We’ll create three icons that symbolize creativity using a 24-pixel grid. Practice files and the grid are available in the description.

Download your free icon grid and practice files for this tutorial.

Step 1: Research Icon Styles

Before starting, research icon styles for consistency across your set. Look on platforms like Dribbble, Pinterest, and Behance for inspiration. Today, we’ll focus on filled icons (shapes filled with color rather than outlines) with rounded corners.

Step 2: Find and Download Icons

Explore icon resources like:

  • Google Fonts: Search for icons like a paintbrush, palette, and camera. Download them as SVGs.
  • Font Awesome: Offers free and paid icons.
  • The Noun Project: Features detailed icons, often free with an account.

Step 3: Prepare Your Grid

Download the 24-pixel icon grid from Google. Use it to ensure consistent size, scale, and padding (2 pixels around each icon). Place the grid on a separate locked layer in Illustrator.

Step 4: Create and Align Icons

  1. Camera Icon:
    • Use a rectangle as the base shape.
    • Round the corners for consistency (e.g., 2-pixel radius).
    • Add a circular lens and ensure alignment using Illustrator’s tools.
    • Set the stroke weight (e.g., 1.5 pixels) for visual consistency.
  2. Paint Palette:
    • Use a circle as the base, then modify it for the palette shape.
    • Adjust the size of the paint spots to match the grid and maintain uniform spacing.
  3. Paintbrush:
    • Combine rectangles and rounded shapes for the handle and tip.
    • Ensure consistent negative space and stroke width (1.5 pixels).

Step 5: Finalizing the Icons

  1. Combine Shapes: Use the Shape Builder tool to merge overlapping elements.
  2. Outline Strokes: Convert strokes to fills using Object > Path > Outline Stroke. This prevents scaling issues.
  3. Clean Up: Remove extra shapes or artifacts with Command + Y (Outline mode).

Step 6: Export Icons

  1. Create individual 24-pixel artboards for each icon.
  2. Position each icon on an artboard, ensuring alignment.
  3. Export in desired formats.

Optional: Create an Outline Version

To offer an outline version:

  1. Convert filled icons to outlines and adjust stroke thickness (e.g., 1.5 pixels).
  2. Align strokes inside the grid boundaries.
  3. Tweak spacing and ensure consistency with the filled versions.

By following these steps, you’ll have a cohesive icon set ready for use.