Icon

Draws one icon from the curated list, in the colour of the text around it.

<script setup lang="ts">
import { FsIcon } from '@fivespark/ui'
</script>

<template>
  <FsIcon name="file-text" :size="20" />
</template>

Usage

<script setup lang="ts">
import { FsIcon } from '@fivespark/ui'
</script>

<template>
  <FsIcon name="search" />
</template>

The name is typed, so an icon that is not on the list is a type error. An icon is never interactive: a clickable icon is an icon-only Button.

Examples

Sizes

16 is the default, inside controls. Use 20 on its own and 24 in an Empty state.

<script setup lang="ts">
import { FsIcon } from '@fivespark/ui'
</script>

<template>
  <div class="flex items-center gap-4">
    <FsIcon name="calendar" />
    <FsIcon name="calendar" :size="20" />
    <FsIcon name="calendar" :size="24" />
  </div>
</template>

Colour

There is no colour prop. The icon takes the text colour of its parent, so set it there.

<script setup lang="ts">
import { FsIcon } from '@fivespark/ui'
</script>

<template>
  <div class="flex items-center gap-4">
    <span class="flex items-center gap-2"><FsIcon name="clock" /> Wacht op akkoord</span>
    <span class="text-danger-ink flex items-center gap-2"><FsIcon name="triangle-alert" /> Levering vertraagd</span>
  </div>
</template>

With a label

An icon is hidden from screen readers by default. Give label only when it means something on its own, with no text beside it.

<script setup lang="ts">
import { FsIcon } from '@fivespark/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <FsIcon name="triangle-alert" :size="20" label="Waarschuwing" />
    Offerte OF-2026-0142
  </div>
</template>

API Reference

FsIcon

Prop	Type	Default	Description
name	"info" | "plus" | "pencil" | "trash" | "copy" | "x" | "download" | "upload" | "search" | "funnel" | "check" | "minus" | "external-link" | "eye" | "eye-off" | "settings" | "log-out" | "ellipsis" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "arrow-up-down" | "layout-dashboard" | "menu" | "circle-check" | "circle-x" | "triangle-alert" | "circle-question-mark" | "loader-circle" | "calculator" | "file-text" | "user" | "building" | "package" | "truck" | "euro" | "percent" | "clock" | "calendar" | "database" | "chart-column"	required	One of the curated icons; your editor lists them as you type.
size	16 | 20 | 24	16	16 inside controls, 20 standalone, 24 in empty states.
label	string		Only for an icon that means something on its own, with no text beside it.