Icon
Icon Examples
Copy-ready examples with live previews.
Basic usage
Renders a Material Symbol name inside a <span>.
Live preview
Basic icon
import Icon from "@/_components/icon/Icon";
export default function Example() {
return <Icon name="home" />;
}Font style (outlined / rounded / sharp)
Changes the font family to Material Symbols Outlined/Rounded/Sharp.
Live preview
style
import Icon from "@/_components/icon/Icon";
export default function Example() {
return <Icon name="favorite" style="rounded" />;
}Sizes
Adds a size class (`cssnt-icon--*`).
Live preview
size
import Icon from "@/_components/icon/Icon";
export default function Example() {
return <Icon name="star" size="extra-large" />;
}Variants (semantic colors)
Adds a color class (`cssnt-icon--*`).
• If you render `variant="white"`, ensure you have enough contrast (example adds a dark background).
Live preview
variant
import Icon from "@/_components/icon/Icon";
export default function Example() {
return (
<>
<Icon name="notifications" variant="primary" />
<Icon name="notifications" variant="danger" />
</>
);
}Fill (0 / 1)
Use `fill={1}` for filled icons when the font supports it.
Live preview
fill
import Icon from "@/_components/icon/Icon";
export default function Example() {
return (
<>
<Icon name="favorite" fill={0} />
<Icon name="favorite" fill={1} />
</>
);
}Custom styles
Inline styles applied to the <span> (useful for opacity, transforms, chips, etc).
Live preview
customStyles
import Icon from "@/packages/ui/src/_components/icon/Icon";
export default function Example() {
return (
<Icon
name="settings"
size="extra-large"
customStyles={{ opacity: 0.8, lineHeight: 1 }}
/>
);
}Interactive playground
Quick way to test combinations (name / style / size / variant / fill).
Live preview
Playground
import { useState } from "react";
import Icon from "@/_components/icon/Icon";
type IconStyle = "outlined" | "rounded" | "sharp";
export default function Example() {
const [fill, setFill] = useState<0 | 1>(0);
return (
<Icon
name="favorite"
style="rounded"
size="large"
variant="danger"
fill={fill}
/>
);
}On this page
Icon Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| name | string | Yes | — | Material Symbol name (e.g. "home", "search"). Rendered as the <span> text. |
| style | "outlined" | "rounded" | "sharp" | No | "outlined" | Controls the font family variant: Material Symbols Outlined/Rounded/Sharp (via internal mapping). |
| size | "small" | "medium" | "large" | "extra-large" | "extra-extra-large" | No | undefined | Adds a size class (`cssnt-icon--*`). |
| variant | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info" | "black" | "white" | No | undefined | Adds a semantic color class (`cssnt-icon--*`). |
| fill | 0 | 1 | No | undefined | Adds a fill class (`cssnt-icon--fill-0` / `cssnt-icon--fill-1`). Use 1 for filled icons. |
| customStyles | React.CSSProperties | No | undefined | Inline styles merged into the <span> (applied after fontFamily). |
Components