Design a cohesive 16×16 to 64×64 pixel icon set with consistent stroke weight, padding, and export workflow for web and mobile apps.

Step 1: Canvas Grid Setup

Create 64×64px document. View > Show > Grid. Set grid to 8px subdivisions.

Step 2: Icon Template

Draw a 56×56px safe zone guide. All icons must fit within with 4px padding.

Step 3: Shape-Based Icons

Use Shape Tools for each icon: home, search, user, settings. 2px corner radius on rectangles.

Step 4: Consistent Stroke

Apply 2px stroke to all icons in same color (#333333). Use Align Stroke to Center.

Step 5: Color Variants

Create normal (gray), hover (blue #3b82f6), and active (dark #1e40af) color groups.

Step 6: Export Slices

Use Slice Tool for each icon. File > Save for Web: PNG-24 with transparency.

Step 7: Sprite Sheet

Arrange all icons on 256×256 sheet for CSS sprite export.

That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.