HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
IconView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA named icon from the Helix set.StableSince 0.1.0MediaUsageimport'@fusion.dev/helix/icon'import'@fusion.dev/helix-headless/icon'Preview
API ReferenceRoothelix-iconA named icon from the Helix set.
PropTypeDescriptionanimation"beat"|"pulse"|"spin"A motion that draws the eye or says work is going on: spin turns the
glyph without end, pulse fades it in and out, and beat swells it.autoWidthbooleanDefaultfalseWhether the box takes the glyph's own proportions, its height from
--icon-size and its width from the glyph's box.flip"both"|"x"|"y"Mirrors the glyph across an axis: x left to right, y top to bottom,
both across both.iconHelixIconThe icon to draw, as an object you import.labelstringDefault""The icon's name, read by screen readers. Set it for an icon that is not
decorative.mirrorbooleanDefaultfalseFlips the glyph on a right-to-left page. Use it for an arrow that means
forward or back.namestringDefault""The name of the icon in the Helix set.rotate90|180|270Turns the glyph clockwise by 90, 180 or 270 degrees.srcstringDefault""The URL of an SVG file to draw, fetched once a page and drawn in
currentColor where the file does not color its shapes.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionerrorEventname matches no registered icon and no library answers it, or src is no SVG, so nothing is drawn.loadEventA glyph a library gave later for name, or the file at src, is drawn.
PartDescriptionsvgThe rendered SVG.
CSS PropertyDescription--icon-animation-durationHow long one turn, pulse or beat of animation takes.--icon-rotateAn angle the glyph is turned by, such as 45deg. rotate wins over it.--icon-sizeThe width and height of the icon's box. The height alone under auto-width.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-iconA named icon from the Helix set.
PropTypeDescriptioniconHelixIconThe icon to draw, as an object you import.labelstringDefault""The icon's name, read by screen readers. Set it for an icon that is not
decorative.mirrorbooleanDefaultfalseFlips the glyph on a right-to-left page. Use it for an arrow that means
forward or back.namestringDefault""The name of the icon in the Helix set.srcstringDefault""The URL of an SVG file to draw, fetched once a page and drawn in
currentColor where the file does not color its shapes.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionerrorEventname matches no registered icon and no library answers it, or src is no SVG, so nothing is drawn.loadEventA glyph a library gave later for name, or the file at src, is drawn.
PartDescriptionsvgThe rendered SVG.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionPreviewOne icon at the default size.PreviewOne icon at the default size.SizesThe same icon at each step of the icon scale.TurnedOne arrow turned with rotate, flipped with flip, and a refresh mark spinning with animation.