Soft Icons

What it is

Soft icons are a distinct visual register between the product's functional XF icons and the expressive illustration system. They are gentle, approachable, and intuitive, with a lightness and playfulness that makes them feel considered rather than generic. They communicate a concept, a state, or a moment without requiring copy to explain them.

Three techniques define the character: magnification of key elements to create emphasis (an enlarged tick in a calendar, a prominent credit card), the interaction of Soft Brew and Parchment to produce shadow or bubbly pop-up effects (sticky notes, palettes), and the removal of detail that does not serve the icon's meaning (a calendar with no dates). Recognizability and simplicity take priority above all else.

Soft icons at Visualist

Soft icons do three things for Visualist that no other asset type does.

They make the product feel warm

In product contexts, soft icons appear in empty states and error states. They signal that even the absence of content has been considered. A cold empty state announces that the product was not finished. A soft icon in that state says the opposite: someone thought about this moment and chose what to put here. That is a brand statement about care and craft at the level of the smallest detail.

They compress a concept into a single image

In brand and marketing contexts, soft icons make product features and concepts immediately readable without showing the interface. They sit between the abstract (motifs, illustrations) and the literal (Simplifieds, Recordings). A palette icon communicates creative tools without a screenshot. A coin stack communicates financial tracking without a chart. A checklist communicates task management without a UI walkthrough. They are the most efficient unit of product communication in the brand system.

They make the brand feel inhabited

Not every soft icon is about a product or feature. A coffee cup, a hanger, a mannequin, a quill and ink, a disco ball: these exist to show that Visualist understands the texture of the ICP's world, not just her workflow. Her tools, her rituals, her moments of celebration and pause. A brand that only shows you its product feels like a product. A brand that also shows you the world around it feels like a companion.

Character

Recognizability above all. Even though soft icons are more expressive than functional UI icons, they must stand on their own. The object must be immediately legible. If the icon requires context to be understood, it has too much going on or the wrong object has been chosen.

Consistent visual metaphor. Each icon maintains a clear link between what it depicts and what it means in context. Where possible, soft icons recall product design elements. The palette soft icon references the XF palette icon and the palette file in the app. The two icon sets share a visual language without being identical.

Composition. Icons are designed on a 24px keyline grid using one of four keyline shapes: round, square, horizontal, or vertical. At 24px, line weight and rounded edges are always set to 0.2px. Strokes are always set to Center. All element sizes must be at multiples of 0.5px only: 1.5px is permitted, 1.75px is not. No element feels cluttered. Consistent padding and margins around core elements create balanced compositions. SVGs scale from the 24px source to any display size without modification.

Brand motifs in icons. New icons may reference the brand motif system (the curve, the X, the axes) as deliberate elements within a composition. The trophy icons are a priority for this treatment: versions with the curve, X, and axes replacing the current bowl, bubble vase, and hourglass variants are planned.

Brand shapes are legacy. Earlier icons used brand shapes (bowls, rings) as decorative Easter eggs. This convention was retired in 2026. The trophy with bowls, trophy with bubble vase, and trophy with hourglass are examples of this legacy treatment. Do not use brand shapes in new icons.

Accessibility. All elements must be visible at the smallest size the icon will be displayed. Colors must provide sufficient contrast. Check at the minimum expected display size before approving.

Color

Six permitted colors, applied at full opacity or at 20% and 50% opacity to produce shadow and pop-up effects. Soft Picardy, Soft Wolfe, and Soft Gretna are interchangeable: each color variant of the same icon is a separate approved asset in the library with its own sequence number.

Soft
Brew

Soft
Picardy

Soft
Wolfe

Soft
Gretna

Parch
ment

Char
coal

Opacity variations. Colors may be applied at 20% or 50% opacity to achieve shadow and bubbly pop-up effects. The left panel of the contract icon and the popup effect on the palette icon show this technique.

Core colors as accent only. Picardy, Wolfe, and Gretna may appear as small contrast marks within an icon, never as the dominant fill. The olive in the martini icon is an example of a permitted core color use.

Interchangeable soft colors. Soft Picardy, Soft Wolfe, and Soft Gretna are interchangeable. An icon in Soft Wolfe may be produced in Soft Picardy or Soft Gretna as a separate approved library asset.

One color family per composition. Do not mix Soft Picardy, Soft Wolfe, and Soft Gretna in the same icon or the same layout. Soft Brew, Parchment, and Charcoal may appear alongside any of the three.

Where it appears

Surface

Notes

Product empty states

Primary product context. One icon per state. The icon must be directly linked to the feature: not a generic placeholder. A moodboard icon for an empty moodboard. A folder icon for an empty file collection. Scale to context.

Product error states

Same rules as empty states. The icon should be contextually appropriate to the error, not generic. Scale to context.

Social media

Feature and concept visuals, and objects from the ICP's world. Can carry a post on its own or anchor copy. Scale to context.

Presentations

Supporting visual elements, never heroes. One icon per slide. Must be legible at the display size of the slide. Scale to context.

Onboarding

Concept markers in onboarding flows. Lighter than an illustration, more specific than a motif. Scale to context.

Never

As a substitute for functional product XF icons. More than one soft color family in a single composition. Combined with an illustration in the same frame. As a hero or primary visual where an illustration or working sketch is the right register.

Do / Don't

Choose the icon whose object is most directly linked to the context it appears in
Scale to context: the icon must be legible at its display size
Use Soft Picardy, Soft Wolfe, and Soft Gretna interchangeably when context allows
Apply opacity variations at 20% or 50% for shadow and pop-up effects
Size all elements at multiples of 0.5px when designing or modifying
Generate and approve all color variants before adding them to the library
Check the library before commissioning a new icon

Don't

Substitute generic icon sets for the Visualist library
Use core colors (Picardy, Wolfe, Gretna) as dominant fills
Mix more than one soft color family in a single composition
Use brand shapes in new icons: this convention was retired in 2026
Combine a soft icon with an illustration in the same frame
Use as a hero visual where an illustration or working sketch is the right register

Right / Wrong

Three tests before a new icon enters the library.

The recognition test

Can the object be identified immediately at its smallest expected display size? If it requires context or explanation, the icon has too much detail or the wrong object has been chosen.

The character test

Does the icon feel gentle and approachable? Is the playfulness present without tipping into cartoon? Does it sit comfortably alongside the existing library without feeling like it came from a different system?

The color test

Are all fills and strokes within the six permitted colors and their opacity variations? Are core colors used only as small accent marks? Is contrast sufficient at the smallest expected display size?

Generation brief

Soft icons are currently designed by a human designer in Figma using the keyline grid. The brief structure below is written to support that process and to serve as the foundation for AI generation as tooling matures. Whether briefing a designer or an AI tool, the same six decisions must be made before work begins.

Keylines

Every icon is designed within one of four keyline shapes. The keyline determines the icon's compositional footprint. Choose the keyline that best fits the natural form of the object being depicted.

Round

Objects with circular or radial form. Coins, clocks, faces, rings, globes.

Square

Objects with balanced, near-equal proportions. Folders, palettes, sticky notes, phones.

Horizontal

Objects wider than tall. Cards, tablets, contracts, measuring tapes laid flat.

Vertical

Objects taller than wide. Bottles, mannequins, hangers, hourglasses, quills.

Brief structure

Six decisions before work begins

1. The object

What is the icon depicting? Be specific. Not "coffee" but "takeaway coffee cup with lid." Not "mail" but "closed mailbox with flag." The object determines everything that follows. If the object is not immediately obvious from a description, it will not be legible in the icon.

2. The keyline

Round, square, horizontal, or vertical. Choose based on the natural form of the object. A mannequin is vertical. A measuring tape is horizontal. A palette is square. A coin is round.

3. The dominant color

Which of the six permitted colors is the primary fill? Soft Brew is the neutral default. Soft Picardy, Soft Wolfe, and Soft Gretna are used when the icon belongs to a specific brand register or when a color variant is being produced.

4. Opacity treatment

Does this icon use opacity variations to create depth, shadow, or a pop-up effect? If yes, specify which elements are at 20% or 50% and what effect is being achieved. If the icon is flat with no opacity treatment, state that explicitly.

5. Detail to include

Which elements of the object must appear for it to be recognizable? Which can be removed? Apply the removal principle: strip everything that does not serve recognition or the brand character. A calendar needs a grid cell and a bold number, not dates. A briefcase needs a handle and a clasp, not stitching.

6. Color variants needed

Which color variants should be produced alongside the primary version? Each variant (Soft Picardy, Soft Wolfe, Soft Gretna) is a separate approved asset. List all variants to be produced in this brief so they enter the library together.

Check the library before commissioning. If an approved icon already depicts the object you need, use it. A new icon is only warranted when the object does not exist in the library or when an existing icon is contextually wrong for the use.

All new icons require Founder review before entering the library. Do not use a new icon in any context until it has been reviewed and approved.

Filename convention. icon-[sequence]-[slug]-[color].svg, for example: icon-001-hourglass-soft-wolfe.svg and icon-002-hourglass-soft-gretna.svg. The sequence is a global count of all approved icon assets including variants.

The library

All approved soft icons at 24px source size. Sequential order by asset number. Each color variant is a separate approved asset with its own sequence number.

Check the library before commissioning a new icon. All new icons require Founder review.

Library coming soon

Icons are being renamed and uploaded to the repository. The library will display here once assets are in place at assets/soft-icons/.