VectorPaint weather icons: balance sun, cloud and rain at one visual size

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.

A clear sun icon does not necessarily belong to the same set as your cloud and raindrops. This exercise creates sunny, overcast and rainy icons in VectorPaint, focusing on their visual size as a group and the rules they share. The result is three graphics that can be exported separately.

Set up comparison areas on one canvas

Create a 960×360 px landscape canvas and divide it into three roughly equal areas, one per icon. Use a grid or temporary reference rectangles to mark a shared centerline and baseline, leaving margins around the outside. These areas are working guides; hide or remove the ordinary reference objects before finishing.

This set uses dark lines and a small amount of warm yellow. Define the main stroke width and endpoint style before drawing. You can begin with a 4 pt stroke for comparison, then adjust it to the display size. The cloud and sun need not have identical bounding boxes; they need comparable visual weight, without being forced into the same silhouette.

Draw sunny weather with a circle and short lines

Use the Ellipse tool to draw an equal-width-and-height circle in the center of the first area, with a warm yellow fill. Draw a short line for a ray and set a consistent dark stroke and endpoint style. Duplicate, rotate and move the line around the circle. Start with rays above, below, left and right, then decide whether to add diagonal rays.

Check that the gaps between the rays and circle are similar, paying particular attention to the visible lengths of diagonal rays. Make sure duplication has not accidentally changed some line widths. Group the sun's parts, move the group, and undo to confirm that no ray was left behind. Grouping helps compare sizes later, while keeping the individual parts editable for now.

Shape the cloud's rises with a simple outline

In the second area, draw a closed cloud with the Pen tool: a fairly flat base and several rounded rises of different sizes across the top. You can first sketch a few circles as references, then trace a clear outer path. Let the largest rise carry the main shape, with smaller rises on either side connecting to the base.

Use the Node tool to inspect curve joins and remove unnecessary small bumps across the cloud's top. The cloud can be wider than the sun's central circle, but include the rays when comparing overall width. Do not push the cloud's base against the area's bottom edge: the rainy version still needs space for drops below, so leave room along the set's baseline.

Extend the same cloud into a rainy icon

Copy the finished cloud to the third area, retaining its outline and stroke. Reduce it slightly or move it up to leave room for rain. Draw a simple drop with the Pen tool, or use three short slanted lines. Choose one approach; stacking drops and rain lines together can add unnecessary complexity.

Finish the first drop's shape and color, then duplicate it into three drops and adjust their spacing and heights. The central drop can sit slightly lower, with the other two balancing it. Leave a visible gap beneath the cloud: when shapes touch at a small size, the drops can resemble a jagged cloud edge. Group the cloud and drops into one rainy icon.

Adjust visual size without stretching the shapes

Place all three groups near the shared centerline. Compare their outer edges first, then their solid areas. The sun has fine outward rays, the cloud has a wide continuous outline, and the rainy icon has details extending below it. Equal bounding boxes can therefore have different visual weights. Scale each group proportionally to preserve natural circles and drops.

Adjust one icon at a time. Balance sunny and overcast first, then add rain. If the rainy icon looks too tall, adjust the gap between the cloud and drops rather than compressing the entire group vertically. Hide the reference frames before judging: readers see the icons, without the geometric guides used to arrange them.

Check the shared rules at a small size

Export a landscape preview, then reduce it to roughly the size of a typical interface. Check that all three icons remain immediately recognizable. Reduce overly dense sun rays, combine small fragmented cloud curves, and increase the visible width of drops that are too thin. Each shape can be simplified differently while keeping the same stroke style.

Test the icons on light and dark backgrounds to decide whether another color variant is needed. If dark strokes disappear on a dark background, prepare an explicit light version rather than simply making the whole group more transparent. Record the main colors, stroke width and minimum display size as references for adding a snow icon later.

Export, questions and final checks

For separate exports, copy each finished group onto its own canvas of the same dimensions, retain consistent margins, and export transparent PNGs and any required SVGs. Match filenames to the correct weather, and retain the source document showing the whole set. Tight cropping to each object's bounds can make the icons appear inconsistently sized when placed in identical containers.

Must all three icons have exactly the same width? No. Keep their containers consistent, then adjust each graphic according to its visible area and recognizability. A narrow icon can retain more space at its sides; there is no need to stretch it to meet a width target.

What if the rainy icon always looks heavier than the sunny one? First reduce cloud details, shrink the drops or increase their spacing, then compare the overall area. Thinning every icon at once would also weaken a sun that was already clear; local adjustments make balance easier to find. Finally, check each outline, color and transparent edge before saving them as one set.

Try extending the set with a fourth weather type

After finishing the three icons, try just one partly cloudy draft. Keep the same cloud and place a smaller copy of the sunny icon's sun behind it, revealing part of its circle and rays. Check that it follows the same stroke, colors and clear space. If the new icon needs completely different lines to read clearly, review the shared rules rather than letting the fourth icon adopt its own style. This extension tests whether those rules are clear enough.