Icon

API reference and demos for Icon.

Source

Import

import { Icon } from "@flanksource/clicky-ui/data";

Demos

Check · Open in Storybook

Error · Open in Storybook

Spinner · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
className	string	—	Classes applied to the glyph or badge wrapper.
flip	string	—	Flip direction for imported glyphs.
height	string | number	—	Explicit glyph height.
icon	StaticIconComponent	—	Imported static icon component.
inline	boolean	—	Forward inline rendering semantics to imported glyphs.
name	string	—	Runtime icon name resolved by the fallback provider.
rotate	string | number	—	CSS rotate value or degrees.
size	enum	—	Named size token (xxs..xxl). Drives the badge diameter and glyph. The glyph is always ~50% of the badge diameter so it scales consistently across sizes. For `style="plain"` it sets width/height when neither is provided.
style	enum	plain	Presentation style. `plain` (default) renders the icon inline. `badge` wraps the icon in a circular chip (white background, ring, shadow) sized by `size` — use in stage/approval cells so the chip scales with a neighbouring avatar.
title	string	—	Accessible title for the glyph.
tone	enum	neutral	Semantic color for `style="badge"`. Ignored for plain icons.
width	string | number	—	Explicit glyph width.