an icon in four moves

Open any icon file in the library and you will find no freehand paths, only shapes: a polygon, a rectangle, a circle, a line with a thick stroke. That is not laziness. It is the whole method. If an icon can be built from the four primitives, anyone can build the next one, and it will match.

the grid

Every icon is drawn on a square of 100 units. The outer 10 on each side are a margin; the inner 80 hold the drawing. One hundred divides into every size we use: at 24 pixels a unit is 0.24 pixels, at 32 it is 0.32, at 48 it is 0.48. Nobody has to convert anything.

home

1. The roof. A triangle 80 units wide and 40 tall, apex at the top center. It is red, because the roof is what turns a block into a house, and the color goes on the part that carries the meaning.
2. The body. A block 56 wide and 40 tall, in ink, hung from the roof's base. It is wider than it is tall because a house is; a square body made the icon look like an arrow pointing down.
3. The door. A bar 16 wide and 28 tall, yellow, on the center line. A second color is allowed when it adds to the story, and a lit door says someone is home.
4. The check. At 24 pixels the door is just under four pixels wide, the roof's edge is clean, and nothing touches the margin. Done.

search

1. The ring. A circle of radius 28 at 42, 42 with a 12-unit stroke. It is the only ring in the set, and a stroked circle is still a circle.
2. The handle. A bar from 62, 62 to 90, 90, 14 units thick, in red. Red marks the part that moves or the part your hand goes to, and on a magnifier that is the handle.
3. The joint. The handle starts where the ring's outer edge is, not inside it. A bar that enters the ring looks like a clock.
4. The check. At 24 pixels the ring's stroke is 2.9 pixels, above the floor of two. Done.

the rules that fall out

• Primitives only. If the drawing needs a shape that is not a circle, square, triangle or bar, it needs two icons or a word.
• Color carries meaning. Ink is the body. Red is the active or moving part. Yellow and blue are a surface or a light. Never all four in one icon, and never color for its own sake.
• Lines are 8 to 16 units. Thinner vanishes at 24 pixels. Thicker reads as a block, so make it a block.
• Only triangles point. An arrow is a bar plus a triangle. There are no chevrons and no curved arrows.
• Center by weight, not by box. A triangle pointing right sits so that its centroid, not its bounding box, is on the middle line. The play icon looks centered because it is slightly left of it.
• No perspective, no outline, no inner shadow. An icon is flat because the screen is.
• Name the icon by what the person does. Add, not plus. Close, not x. Done, not check.

adding one

Draw it on the 100-unit grid in a vector tool, using only the four shapes. Export the SVG with no paths and no transforms except rotations by multiples of 45 degrees. Check it at 24 pixels next to home and search. If it looks heavier or lighter than those two, change the shapes, not the stroke. Then add it to the library with its name and one line about when to use it.