Icon

The wrapper every Glint glyph goes through, giving a Lucide icon one size, tint and stroke width.

import { Icon } from "@glint/components/icon.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 24px;

            Icon { icon: IconSet.Heart; size: 24px; tint: Tokens.color-destructive; }
            Icon { icon: IconSet.Star; size: 24px; tint: Tokens.color-warning; }
            Icon { icon: IconSet.CheckCircle2; size: 24px; tint: Tokens.color-affirm; }
            Icon { icon: IconSet.Zap; size: 24px; tint: Tokens.color-primary; }
        }
    }
}

Usage

import { Icon } from "@glint/components/icon.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component AppWindow inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Icon {
                icon: IconSet.Sliders;
                size: 20px;
                tint: Tokens.color-foreground;
            }
        }
    }
}

Icon is a wrapper around lucide-slint’s IconDisplay. It standardizes properties with token support for size, tint, and stroke-width.

Note that @lucide is an external peer dependency provided by lucide-slint that the consumer includes in their Slint environment, not something Glint vendors directly.

Examples

Sizes and stroke widths

Icons scale to custom pixel dimensions and adjust their line weight with stroke-width.

import { Icon } from "@glint/components/icon.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 24px;

            Icon {
                icon: IconSet.Settings;
                size: 16px;
            }

            Icon {
                icon: IconSet.Settings;
                size: 24px;
                stroke-width: 1.5px;
            }

            Icon {
                icon: IconSet.Settings;
                size: 32px;
                stroke-width: 2.5px;
            }
        }
    }
}

Tint colors

Use semantic color tokens to tint icon paths.

import { Icon } from "@glint/components/icon.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 24px;

            Icon {
                icon: IconSet.Flame;
                size: 24px;
                tint: Tokens.color-destructive;
            }

            Icon {
                icon: IconSet.ShieldCheck;
                size: 24px;
                tint: Tokens.color-affirm;
            }

            Icon {
                icon: IconSet.Sparkles;
                size: 24px;
                tint: Tokens.color-primary;
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`icon`	`in LucideIcon`	no default	Icon selected from lucide-slint's IconSet.
`size`	`in length`	`16px`	Pixel side length of the square icon.
`tint`	`in color`	`Tokens.color-foreground`	Stroke color; defaults to the Relay foreground token.
`stroke-width`	`in length`	`2px`	Stroke thickness used by the Lucide renderer.

Accessibility

An icon says nothing on its own. Icon declares no accessible-role and no label — it is strokes in a box. A glyph beside a word is exactly right that way: the word is what is announced, and a second announcement of the same thing is noise.
A glyph that is the only label needs one. An icon-only control carries its name on the control, not on the icon: Button { accessible-label: "Delete"; } around an IconSet.Trash. Glint’s own icon-only controls already do this and take the name from a property — Dialog’s X from close-label, the carousel’s steps from previous-label / next-label.
Silence it where its host already speaks. An icon inside a component that publishes its own label can still be reached by a tree walker; Glint marks those accessible-role: none — the badge’s glyph, the bullet in a BulletList, the required asterisk on a Label — and a call site composing its own row should do the same.
Tint is not a message. tint changes no announcement, so an icon whose color is the state — a red error glyph — needs that state in words on the control or in its accessible description.