Foundation
PictogramsPictograms are SVGs fetched from the Figma API and rendered as individual React components. They are larger than icons and typically displayed at 6em × 6em.
Import and usage
To use a pictogram in your project, simply import it from the pictograms package and include it in your JSX:
import Fika from '@svs/ui/react/pictograms/Fika';
const MyComponent = () => (
<Fika />
);
export default MyComponent;Sizes and colors
Default size and color
Size 2xl
Size 8xl
Color primary
Color success
Color attention
Code for the above examples
import Fika from '@svs/ui/react/pictograms/Fika';
const MyComponent = () => (
<div className="grid grid-cols-1 gap-4 mb-12 md:grid-cols-2">
<div className="flex flex-col gap-4">
<div className="flex flex-row items-center gap-4 rounded bg-layer-contrast-on-base px-4 py-4">
<div>
<Fika />
</div>
<span>Default size and color</span>
</div>
<div className="flex flex-row items-center gap-4 rounded bg-layer-contrast-on-base px-4 py-4">
<div className="text-2xl">
<Fika />
</div>
<span>Size 2xl</span>
</div>
<div className="flex flex-row items-center gap-4 rounded bg-layer-contrast-on-base px-4 py-4">
<div className="text-4xl">
<Fika />
</div>
<span>Size 8xl</span>
</div>
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-row items-center gap-4 rounded bg-primary px-4 py-4 text-primary-fg">
<div>
<Fika />
</div>
<span>Color primary</span>
</div>
<div className="flex flex-row items-center gap-4 rounded bg-success px-4 py-4 text-success-fg">
<div className="text-2xl">
<Fika />
</div>
<span>Color success</span>
</div>
<div className="flex flex-row items-center gap-4 rounded bg-attention px-4 py-4 text-attention-fg">
<div className="text-4xl">
<Fika />
</div>
<span>Color attention</span>
</div>
</div>
</div>
);
export default MyComponent;