VectorPaint project: design a monochrome mountain icon that reads small

English translation of the Chinese original, translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

Build a mountain icon around silhouette, negative space and line width, then check recognition at 32, 64 and 128 pixels.

Define the single idea the icon should express

This exercise expresses only 'mountain'; do not add a sun, river, houses, and explanatory text at the same time. Create a 512×512 px canvas and work with a dark graphic on a light background. Icons are generally smaller than illustrations, so quick recognition within limited space matters more than the number of details visible when enlarged. Complete a clear basic silhouette first, then compare details gradually.

Establish hierarchy with two silhouettes

Use the pen to draw a larger triangular peak, then a slightly shorter peak beside it. Try a main peak about 280 high, a secondary peak about 200 high, and a combined width of about 360, leaving space around them. The peaks need not be perfectly symmetrical, but their hierarchy should be clear. Use only solid fills for now so gradients do not conceal the silhouette relationship. If their intersection becomes complicated, simplify the placement before continuing.

Use negative space to describe mountain details

Consider a simple light snowcap below the summit or a strip of negative space suggesting a facet. Negative space conveys shape too, and its width must work beyond an enlarged canvas. Start with a narrowest gap that is easily visible, then zoom out. Do not equate many thin lines with refinement: at a small size, they may merge into gray or disappear.

Keep a consistent contour style

For a solid silhouette, express detail mainly through color regions and negative space. For a line icon, establish consistent stroke widths and endpoint styles. Either approach works, but avoid making one part a heavy silhouette and another extremely fine line art without a clear reason. Use the fill-and-stroke tutorial to establish one style before gradually introducing variation.

Inspect three size levels

Prepare previews of the same icon at approximately 32, 64, and 128 pixels. Check whether the main peak is recognizable, the snowcap merges with nearby shapes, or the gap between the peaks disappears. These are usage tests, not mandatory platform dimensions. If the icon is unclear at a small size, simplify the original or increase important gaps. Do not merely enlarge the exported file and declare the problem solved.

Make geometric and visual centers work together

Use alignment to establish a centered baseline, then examine visual weight. A mountain is pointed at the top and broad at the bottom, so mathematical centering may not look most stable. Make small vertical adjustments in a copy and compare which feels better. Keep each shift small and compare at the same display size. Without a baseline, repeated casual dragging makes it difficult to know why the final version is better.

Use the silhouette to judge whether the icon is overdesigned

Temporarily remove the snowcap, textures, and guides and examine only the main and secondary peak silhouettes. If the subject remains recognizable, restore necessary details one at a time. If the silhouette itself looks like unrelated triangles, adjust their sizes, overlap, and relationship at the base first. This order prevents decoration from hiding structural problems and helps you understand why each object exists.

Design negative space together with the solid regions. A narrow gap between peaks may look attractive when large but disappear when reduced. A snowcap too close to the outer edge may create an unstable thin line. Widen the narrowest area slightly and compare at a small size instead of judging 'refinement' only on the design canvas. If there is not enough room, remove a level of detail altogether.

Finally, compare visual area. Of two icons with equally sized bounding boxes, a solid mountain often feels heavier than a thin outline mountain. If they will appear alongside other icons, aim for visual balance across the set rather than forcing every shape to fill exactly the same bounds. Make slight size adjustments where necessary while retaining a clearly consistent style.

Final checks and two output formats

Export a transparent PNG for common display uses, then an SVG for continued use of the paths. Check transparency, pixel dimensions, contours, and negative space, and save the editable original for later shape changes. Use consistent filenames, such as mountain_dark_64 and mountain_dark_vector. For an actual brand, separately assess distinctiveness and usage requirements. A general exercise does not automatically become a validated brand mark.

Further exercise: create inverted black-and-white versions

Keep the same outline and create dark-subject and light-subject versions. Check them against different backgrounds to see whether the internal negative space still works.
Widen the narrowest gap slightly and compare only the small-size results to see whether the adjustment actually improves recognition.
Temporarily remove the secondary peak and compare which is clearer: one peak or two. Use the result to decide whether to retain the second object.

Frequently asked questions

Should a small icon always be as simple as possible?

Simplicity usually helps, but excessive reduction can remove identifying features. Keep the contours and spaces that best express the subject, and remove details that cannot serve a purpose at the target size.

Can a white snowcap count as a transparent hole?

A white object differs from a transparent hole. On a dark background, white remains white. Decide whether to retain white or use an actual contour structure according to the intended use, and check the transparent output.

Why does it look good at 512 pixels but blurry at 32 pixels?

Small sizes leave fewer pixels for detail, so narrow gaps and sharp corners may not read clearly. Simplify the structure for the intended size instead of inspecting only the large design canvas.

Sources and scope

This article is based on VectorPaint App Store description and the available feature entry points; Apple’s public release information Checked on October 22, 2026, for version 1.0.7, requiring iOS / iPadOS 17.0 or later. The interface may vary by device and version. Dimensions, colours and wording are exercise suggestions; confirm the requirements for your actual use.