Icon

Fission

Product

▾

Setup

›

›

Icon is the vector-graphic widget for small symbolic visuals.

Use it for toolbar actions, status marks, navigation hints, and compact visual labels. Icons are strongest when they support nearby text or a familiar interaction pattern. Most product interfaces become harder to learn when icons are asked to carry all meaning alone.

Example

use fission::prelude::*;
let widget: Widget = Icon::svg(material::navigation::chevron_right::regular())
    .size(18.0)
    .color(view.env.theme.tokens.colors.text_secondary)
    .into();

Field table

Field	Type	Meaning	Notes / default behavior
id	Option<WidgetId>	Stable widget identity.	Defaults to None.
source	IconSource	Where the icon graphic comes from.	Use path data, inline scalable vector graphics (SVG) content, or a filesystem SVG file. This is the first form you should read when you see SVG on this page.
color	Option<Color>	Fill color override.	Defaults to the theme's primary text color.
size	Option<f32>	Square layout size in points.	Defaults to 24.0.
stroke	Option<Stroke>	Optional stroke style.	When present, fill is suppressed in the checked-in renderer.

Source choices

IconSource::Path is a plain scalable vector graphics (SVG) path string. IconSource::SvgContent is full inline SVG markup. IconSource::File reads an SVG file from the host filesystem at render time.

That last option is convenient in desktop tooling, but it is less portable than inline or generated SVG content because filesystem access and asset packaging differ across targets. For cross-platform app code, inline or bundled SVG content is often the safer choice.

Accessibility and responsive notes

The widget is purely visual. If the icon carries meaning, pair it with text or add semantics at the parent level. Also keep size intentional: tiny icons inside dense tables are fine, but touch targets on mobile usually need a larger surrounding button or container.

Production checklist

For Icon, review the fields that change behavior before treating the widget as finished: id, source, color, size, stroke. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Icon setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Image, Button, Badge, and Text.