Icon Design

This workbook turns the Icon Design course into a finished, shippable 30-icon set. Each section maps to one course module and moves you from grid setup, through precise drawing and optical correction, to a systematized, exported, and documented icon library. Work through the exercises in order and keep all source files on a single 24px grid.

Establish your set's concept, build the reusable 24px grid with keylines, and lock your core style rules.

Pick three icon concepts from your planned set (for example settings, search, profile). Sketch each concept three different ways. Shrink every sketch to roughly 20 pixels tall on screen and squint. Circle the version of each that stays readable when blurred, and note why it survived.

Define your grid specification before drawing anything, then build it as a reusable template in your tool. Fill in each value and confirm the template is saved.

Build icons from primitives, master optical correction, and balance internal spacing and detail density.

Using only rectangles, circles, and rounded rectangles plus Boolean operations (union, subtract, intersect, exclude), construct five icons on your grid: plus, minus, check, close (X), and a search magnifier. Keep all strokes live and all anchor points on whole pixels. Do not draw any path freehand.

Place a square, a circle, and a triangle side by side, each at a 20px bounding box. Adjust the circle and triangle until all three read as equal visual weight, then shift the triangle horizontally and vertically until it looks centered. Compare your corrected shapes to Material or Feather equivalents.

For each icon you draw, fill one row of this sheet to confirm it obeys the rules before you call it done.

Standardize shared components, plan multi-state icons, and document everything in an icon specification.

Identify every part that repeats across your set and build each one once as a reusable component or symbol: arrowhead, plus and minus marks, notification dot, container rectangle, and user silhouette. Rebuild any existing icon that should use these so it pulls from the shared part.

Record the single agreed symbol for each concept in your set so you never contradict yourself. Add a row for every concept you need to represent.

List the icons that need both an outline (inactive) and filled (active) state, typically navigation destinations, and confirm each pair shares one silhouette.

Produce clean uniform SVG, name and version the library, and assemble a complete developer handoff package.

Export every icon to SVG, then run each one through SVGO or SVGOMG. Standardize the viewBox to 0 0 24 24, set fill or stroke to currentColor, and confirm each file has the same structure. Compare the raw and optimized file sizes.

Create one row per icon to lock in kebab-case, meaning-based names and catch duplicates before release.

Place all 30 icons on a single board and view them at both 24px and 16px. Hunt for outliers in weight, density, alignment, and legibility, and drop a few icons into a real interface mockup to sanity-check them in context.