You’re building a crop tool. You search for “crop grid icon,” find a clean SVG, and put it in the toolbar.
Then you add six composition guides.
The same grid now represents Rule of Thirds, Grid, Diagonal, Triangle, Golden Ratio, and Golden Spiral.
The icon still looks good. But what does it tell the user about the selected mode?
That is where icon selection becomes a problem of meaning.
A real example: six crop overlays
A PhotoCraft feature request describes this situation: the crop overlay button displays a 3 × 3 grid, regardless of the selected overlay.
The proposal asks for a distinct icon for each mode, shown beside its menu label. The toolbar button would also display the icon of the active overlay.
The request calls for original drawings with a shared visual style and documented attribution.
Sometimes the right result of an icon search is realizing that you need a small, purpose-built family.
The illustrations in this article use original example drawings. They are not screenshots of PhotoCraft or icons taken from its repository.
First, decide what the icon represents
Before searching, write down the role of the control.
These are different jobs:
- Action: crop the image.
- Setting: choose a composition guide.
- State: show which guide is currently active.
A generic crop symbol can represent the action. It says much less about the selected guide.
For the overlay selector, a more useful brief is:
Help the user distinguish this composition guide from the other five.
That sentence gives you a way to reject attractive but misleading results.
A table icon might resemble a grid. A shuffle icon might contain diagonals. Neither necessarily explains a crop overlay.
Turn the brief into search terms
Start with the exact concept, then expand into related vocabulary.
For this example, I would build the following search shortlist:
| Intended meaning | Search phrases to try | Distinction to preserve |
|---|---|---|
| Rule of Thirds |
rule of thirds, thirds guide, composition grid
|
Three equal divisions on each axis |
| Grid |
grid overlay, composition grid, alignment grid
|
A visibly denser guide |
| Diagonal |
diagonal guide, diagonal composition
|
Diagonal structure |
| Triangle |
triangle composition, golden triangle guide
|
The guide geometry, rather than a generic triangle |
| Golden Ratio |
golden ratio grid, phi grid, golden section
|
Unequal spacing |
| Golden Spiral |
golden spiral, composition spiral
|
An inward spiral |
These are search suggestions, not a claim that any particular library contains all six.
Broadening the vocabulary helps discovery. It should not weaken the acceptance criteria.
For example, “spiral” may return loading indicators, weather symbols, or decorative swirls. Those are related shapes, but they may suggest entirely different behavior.
Search broadly. Select precisely.
Compare the nearest neighbors
The hardest question is usually not whether an icon works on its own.
It is whether it looks too much like another option.
In this family, the critical comparisons are:
Rule of Thirds versus Grid. Both use horizontal and vertical lines. If their density becomes indistinguishable at the displayed size, their shared style has erased the useful difference.
Rule of Thirds versus Golden Ratio. Their spacing carries the distinction. A small change in line position may be difficult to notice in a compact menu.
Diagonal versus Triangle. Both rely on diagonal strokes. The defining geometry must survive reduction.
Place the most similar candidates next to each other before reviewing the whole family. Ask what visible feature lets someone tell them apart.
If the answer requires zooming in, reconsider the drawing—or give the label more responsibility.
Keep the visual grammar consistent
Once the meanings are right, review the family as a whole.
Use a consistent approach to stroke weight, line endings, framing, internal padding, and visual density.
But consistency does not mean making every icon equally complex.
A spiral and a grid contain different structures. Forcing them into identical amounts of detail can make both less useful.
A shared SVG viewBox also does not guarantee equal apparent size. One drawing may fill the available area while another occupies only its center.
Compare the rendered symbols, not just their attributes.
Inspect at the size people will actually see
A large preview is useful for checking paths. It is insufficient for judging a menu icon.
Place candidates at 16, 20, and 24 pixels, then include the actual size used by your interface if it differs.
Each 1× sample occupies the stated number of pixels in the source PNG. The 3× views enlarge those same pixels without smoothing. Open the image at 100% zoom to inspect the native sizes; page scaling changes their apparent size.
These samples were rasterized for the illustration. Check the actual SVGs in your target browser and display environment too: a static PNG does not reproduce every rendering condition.
At each size, check:
- Whether nearby lines remain distinguishable.
- Whether the defining feature survives.
- Whether one icon appears heavier than the others.
- Whether selected and unselected states remain readable.
- Whether the family works against the intended backgrounds.
Treat this as a visual inspection, not proof of recognition.
To evaluate recognition, ask people to match the symbols to the six modes without revealing the answers first. Record which pairs they confuse. Then repeat the task with labels to assess the interface people will actually use.
Let the button show the current state
If the selected guide changes, the toolbar can reflect that change.
Illustrative interface comparison. Both menus select Golden Spiral, but only the right-hand button reflects that selection.
The button can act as a reminder of the current setting while still opening the selection menu. Its icon should follow the underlying state, including changes made through keyboard shortcuts.
Let labels do their job
Some composition guides are specialist concepts. An unfamiliar user may not recognize a golden-ratio grid regardless of how carefully it is drawn.
Keep the visible names in the selection menu.
For a compact toolbar button, provide an accessible name that communicates its purpose and current value, such as:
Composition guide: Golden Spiral
The graphic can provide a quick visual reminder. It does not need to carry every part of the explanation by itself.
Know when to stop searching
An icon catalogue is useful for discovering vocabulary, comparing visual approaches, and finding existing assets.
It cannot guarantee an exact match for every specialist concept.
If five candidates fit and the sixth communicates the wrong thing, choosing it merely to complete the set creates a semantic inconsistency.
At that point, consider drawing the family specifically for the feature. If you adapt existing assets, check the applicable licenses and keep their source and attribution information.
Document original work too. Future maintainers should be able to tell where each asset came from.
Start your next search with one sentence
Before opening SVGicons or another icon library, complete this sentence:
This icon should help the user distinguish ___ from ___.
“Golden Ratio from Rule of Thirds” is a much stronger brief than “a nice grid.”
It gives your search a purpose—and gives you a reason to reject an icon even when it looks perfect.
Which pair of icons has been hardest to distinguish in an interface you’ve built?
Top comments (0)