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
Material Symbols icon wrapper that renders a <span> with the correct font family and utility classes for size, variant, and fill.
This component requires Material Symbols variable fonts to be available in your app (via @font-face or Google Fonts).
The component always includes the base class `cssnt-icon` and conditionally appends: `variantClasses[variant]`, `fillClasses[fill]`, and `sizeClasses[size]`.
In `Icons.variants.ts`, `tertiary` maps to `cssnt-color-tertiary` (not `cssnt-icon--tertiary`). If that is unintended, adjust the mapping.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| name | string | Yes | n/a | 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). (Values: outlined, rounded, sharp) |
| size | "small" | "medium" | "large" | "extra-large" | "extra-extra-large" | No | undefined | Adds a size class (`cssnt-icon--*`). (Values: small, medium, large, extra-large, extra-extra-large) |
| variant | "primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info" | "black" | "white" | No | undefined | Adds a semantic color class (`cssnt-icon--*`). (Values: primary, secondary, tertiary, success, warning, danger, info, black, white) |
| fill | 0 | 1 | No | undefined | Adds a fill class (`cssnt-icon--fill-0` / `cssnt-icon--fill-1`). Use 1 for filled icons. (Values: 0, 1) |
| customStyles | React.CSSProperties | No | undefined | Inline styles merged into the <span> (applied after fontFamily). |
Components