Foundation
IconographyIcons are SVGs fetched from the Figma API and rendered as individual React components. They inherit their size and color from their parent’s font settings.
Import and usage
To use an icon in your project, simply import it from the icons package and include it in your JSX:
import { Home } from '@svs/ui/react/icons';
const MyComponent = () => (
<Home />
);
export default MyComponent;Sizes and colors
Default size and color
Size text-xl
Size text-2xl
Size text-4xl
Color primary
Color primary-variant
Color success
Color attention
Code for the above examples
import { Home } from '@svs/ui/react/icons';
const MyComponent = () => (
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-4">
<div className="flex flex-row items-center gap-2 px-4 py-2 rounded bg-layer-contrast-on-base">
<Home />
<span>Default icon</span>
</div>
<div className="flex flex-row items-center gap-2 text-xl px-4 py-2 rounded bg-layer-contrast-on-base">
<Home />
<span>Size text-xl</span>
</div>
<div className="flex flex-row items-center gap-2 text-2xl px-4 py-2 rounded bg-layer-contrast-on-base">
<Home />
<span>Size text-2xl</span>
</div>
<div className="flex flex-row items-center gap-2 text-4xl px-4 py-2 rounded bg-layer-contrast-on-base">
<Home />
<span>Size text-4xl</span>
</div>
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-row items-center gap-2 bg-primary text-primary-fg px-4 py-2 rounded">
<Home />
<span>Color primary</span>
</div>
<div className="flex flex-row items-center gap-2 text-xl bg-primary-variant text-primary-variant-fg px-4 py-2 rounded">
<Home />
<span>Color primary-variant</span>
</div>
<div className="flex flex-row items-center gap-2 text-2xl bg-success text-success-fg px-4 py-2 rounded">
<Home />
<span>Color success</span>
</div>
<div className="flex flex-row items-center gap-2 text-4xl bg-attention text-attention-fg px-4 py-2 rounded">
<Home />
<span>Color attention</span>
</div>
</div>
</div>
);
export default MyComponent;