Sketching UI Icons: A Beginner's Guide to Visual Vocabulary

A wireframe of empty grey boxes tells a client very little. The same wireframe with a magnifying glass sitting in the search slot tells them almost everything. Icons are the shorthand of interface design: small drawings that carry meaning faster than a label, and the one part of a rough layout reviewers judge instantly.

You do not need to be able to draw to sketch them. Interface icons are assembled from a handful of shapes arranged in different ways. Learn those arrangements and you build a visual vocabulary — a set of marks you can put down in seconds without stopping to think, which leaves your attention where it belongs: on layout, hierarchy and flow.

Why Sketch Icons Rather Than Drag Them In

Grabbing icons from a library is fine when you are producing finished work. During early exploration it gets in the way. Hunting for the right file interrupts the thinking, and dropping in a polished icon makes a rough idea look more resolved than it really is, which changes the feedback you receive.

Drawing them yourself teaches you something else: which details actually carry the meaning and which are decoration. After a few weeks of practice, a bin or a bell takes four seconds instead of four minutes. There is also a memory benefit: the act of constructing an icon from primitive shapes fixes its form in your mind, so you can recall and redraw it on a whiteboard during a meeting without hesitation.

Start With a Shape Kit

Almost every interface icon is built from seven marks. Fill a page with them before you attempt a single icon, so your hand knows the shapes.

• Circle — avatars, status dots, radio buttons.
• Square and rectangle — documents, screens, cards, checkboxes.
• Straight line — menus, dividers, plus and minus signs.
• Triangle — play buttons, warnings, sorting arrows.
• Arc or curve — sound waves, the bowl of a magnifying glass.
• Dot — ellipses, notifications, drag handles.
• Cross — close buttons, deletions, errors.

Work inside a consistent frame. Draw a light 24 × 24 box for every icon and keep the artwork about two units inside the edge. That padding is what stops a set looking cramped and helps icons sit evenly on a toolbar. For example, a search icon might use a circle of radius 6 centred slightly above the middle, with a 45-degree line extending from its lower right edge to the frame boundary. A settings icon could be three horizontal lines of equal length, each with a small circle positioned at a different point along the line to suggest a slider.

A Starter Vocabulary of Common Icons

This set will cover most wireframes you sketch in your first year.

Navigation and structure

Menu: three horizontal lines of equal length. Chevron: two strokes meeting at a right angle, effectively an arrow with the shaft removed. Arrow: a line plus a chevron head; direction is the only information it needs. Home: a triangle roof over a square. Search: a circle with a line leaving the lower right at roughly 45 degrees. Close: a diagonal cross.

Actions

Add: a plus sign, kept short and even. Edit: the diagonal pencil — two parallel lines for the barrel and a small triangle for the point. Delete: a bin with a lid and two vertical strokes inside. Download: an arrow pointing at a horizontal line or tray. Settings: a cog if you enjoy drawing teeth, or three slider lines if you do not. Sliders are quicker and just as readable.

Status and feedback

Notification: a bell — a rounded dome, a flat base, a small dot. Favourite: a five-pointed star, or a heart made from two arcs and a V. Success: a tick. Warning: an exclamation mark inside a triangle. Information: a lowercase i inside a circle.

Pick one metaphor per concept and stick to it. A bin and a cross both mean delete; using them interchangeably in the same wireframe creates doubt where there should be none. Consistency also reduces the cognitive load for your reviewer, who can scan the layout and understand the controls without reading a single label.

A Method You Can Repeat

When you meet an icon you have not drawn before, run through the same sequence.

1. Name the concept in one word. That word is your brief.
2. Picture the real object, then strip it back to a silhouette. Most icons should read as a black shape before any line is drawn.
3. Break the silhouette down using the shape kit — a magnifying glass is a circle plus a line.
4. Sketch it lightly in pencil inside your 24 × 24 frame.
5. Squint, or hold the page at arm's length. If the shape is not readable at that distance, simplify rather than add detail.
6. Redraw it in pen with your standard stroke weight. One clean line beats three wobbly ones.
7. Shrink it. View the sketch at the size it will appear on screen; detail that vanishes was never needed.

If the icon still feels wrong after two attempts, write the label instead. A word is better than a confusing symbol, and you can return to the drawing later with fresh eyes.

Rules That Make a Set Look Like a Set

Consistency matters more than draughtsmanship. An uneven set of well-drawn icons looks worse than a neat set of crude ones.

• One stroke weight. Use the same fine liner throughout, usually between 0.3 mm and 0.5 mm.
• One treatment. Outline or solid, not both, unless you are deliberately using fills for emphasis.
• Consistent corner radius. If your squares have rounded corners, round them all at roughly the same radius.
• Optical alignment. Circles and triangles often need to overshoot the frame slightly to appear the same size as squares.
• Equal visual weight. A dense icon like a cog will feel heavier than a simple arrow; simplify the cog until they balance.

Practising Without a Project

Improvement comes from repetition, not from waiting for a client brief. Set aside ten minutes a day and work through a list of the fifty most common interface icons. Sketch each one ten times in a row, varying the size and stroke. The first few will be clumsy; by the tenth, your hand will have learned the path.

Another useful drill is the one-minute icon. Pick a concept at random — share, filter, lock, upload — and draw it as fast as you can. Speed forces you to rely on your shape kit rather than fussing over details. Afterwards, compare your sketch to a reference. You are not aiming for a perfect replica, just for the essential silhouette.

Common Mistakes and How to Fix Them

Even experienced sketchers slip into a few habits. Watch for these.

• Too much detail. A tiny camera with a lens, flash and grip will turn to mud at 16 pixels. Reduce it to a rectangle with a circle inside.
• Inconsistent metaphors. Mixing a floppy disk for save with a cloud for save in the same wireframe confuses the reader. Choose one.
• Ignoring the frame. Icons that float outside the 24 × 24 box will look misaligned when placed in a row. Keep the artwork inside.
• Overworking the sketch. If you find yourself erasing repeatedly, you are drawing too slowly. Make a fresh sketch beside it and keep moving.

Fix these by stepping back and squinting. The icon should read as a single, confident mark, not a collection of nervous lines.

When to Stop Sketching and Draw Properly

Sketching is a thinking tool, not a deliverable. Once the layout is approved and you move into visual design, switch to a consistent icon set — either drawn digitally with a grid or sourced from a well-made library. Your hand-sketched vocabulary will still guide you: you will know which details to keep and which to discard, because you have already tested them on paper.

Until then, keep your pencil loose and your shapes simple. The goal is not beautiful icons. The goal is a wireframe that communicates instantly, so the conversation can move on to the harder problems of interaction and flow.

Photo: Ivan S / Pexels