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.
| Color | Role |
|---|---|
| Soft Brew | Neutral default |
| Soft Picardy | Interchangeable soft color |
| Soft Wolfe | Interchangeable soft color |
| Soft Gretna | Interchangeable soft color |
| Parchment | May appear alongside any soft color |
| Charcoal | May appear alongside any soft color |
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
Do
- 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.
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.
| Keyline | Use |
|---|---|
| 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. |
Six decisions before work begins:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 once assets are in place at assets/soft-icons/.