@aleph-alpha/ui-library 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/ui-library",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/system/lib.js",
@@ -70,7 +70,6 @@
     "vue-tsc": "^2.2.12",
     "wait-on": "9.0.3",
     "@aleph-alpha/config-css": "0.20.0",
-    "@aleph-alpha/ds-icons": "0.11.0",
     "@aleph-alpha/eslint-config-frontend": "0.4.0",
     "@aleph-alpha/prettier-config-frontend": "0.4.0",
     "@aleph-alpha/tsconfig-frontend": "0.5.0"

package/src/compositions/UiDataTable/UiDataTable.stories.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import type { ColumnDef } from '@tanstack/vue-table';
 import { computed, h, ref } from 'vue';
-import { Ban, MoreHorizontal } from 'lucide-vue-next';
 import {
   UiDataTable,
   UiDataTableColumnHeader,
@@ -10,6 +9,7 @@ import {
 } from './index';
 import { UiCheckbox } from '@/primitives/UiCheckbox';
 import { UiButton } from '@/primitives/UiButton';
+import { UiIcon } from '@/primitives/UiIcon';
 import {
   UiDropdownMenu,
   UiDropdownMenuContent,
@@ -930,8 +930,7 @@ export const WithCustomEmptyText: Story = {
 };
 
 const withCustomEmptySlotTemplateSource = `<script setup lang="ts">
-import { UiDataTable } from '@aleph-alpha/ui-library';
-import { Ban } from 'lucide-vue-next';
+import { UiDataTable, UiIcon } from '@aleph-alpha/ui-library';
 import type { ColumnDef } from '@tanstack/vue-table';
 
 interface Payment {
@@ -954,7 +953,7 @@ const columns: ColumnDef<Payment>[] = [
   <UiDataTable :data="data" :columns="columns">
     <template #empty>
       <div class="flex flex-col items-center gap-2 text-muted-foreground">
-        <Ban class="h-8 w-8" />
+        <UiIcon name="ban" :size="32" />
         <p>No data available for this view.</p>
       </div>
     </template>
@@ -978,7 +977,7 @@ export const WithCustomEmptySlot: Story = {
     },
   },
   render: (args) => ({
-    components: { UiDataTable, Ban },
+    components: { UiDataTable, UiIcon },
     setup() {
       return { args };
     },
@@ -986,7 +985,7 @@ export const WithCustomEmptySlot: Story = {
       <UiDataTable v-bind="args">
         <template #empty>
           <div class="flex flex-col items-center gap-2 text-muted-foreground">
-            <Ban class="h-8 w-8" />
+            <UiIcon name="ban" :size="32" />
             <p>No data available for this view.</p>
           </div>
         </template>
@@ -1285,7 +1284,7 @@ const rowActionsColumns: ColumnDef<Payment>[] = [
             h(UiDropdownMenuTrigger, { asChild: true }, () =>
               h(UiButton, { variant: 'ghost', size: 'icon', class: 'h-8 w-8' }, () => [
                 h('span', { class: 'sr-only' }, 'Open menu'),
-                h(MoreHorizontal, { class: 'h-4 w-4' }),
+                h(UiIcon, { name: 'more-horizontal', size: 16 }),
               ]),
             ),
             h(UiDropdownMenuContent, { align: 'end' }, () => [

package/src/compositions/UiDataTable/UiDataTableColumnHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="TData, TValue">
   import type { Column } from '@tanstack/vue-table';
-  import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-vue-next';
   import { UiButton } from '@/primitives/UiButton';
+  import { UiIcon } from '@/primitives/UiIcon';
   import {
     UiDropdownMenu,
     UiDropdownMenuContent,
@@ -65,26 +65,40 @@
           :aria-label="sortLabel"
         >
           <span>{{ title }}</span>
-          <ArrowDown
+          <UiIcon
             v-if="column.getIsSorted() === 'desc'"
-            class="ml-2 h-4 w-4"
+            name="arrow-down"
+            :size="16"
+            class="ml-2"
             aria-hidden="true"
           />
-          <ArrowUp
+          <UiIcon
             v-else-if="column.getIsSorted() === 'asc'"
-            class="ml-2 h-4 w-4"
+            name="arrow-up"
+            :size="16"
+            class="ml-2"
             aria-hidden="true"
           />
-          <ChevronsUpDown v-else class="ml-2 h-4 w-4" aria-hidden="true" />
+          <UiIcon v-else name="chevrons-up-down" :size="16" class="ml-2" aria-hidden="true" />
         </UiButton>
       </UiDropdownMenuTrigger>
       <UiDropdownMenuContent align="start">
         <UiDropdownMenuItem @click="column.toggleSorting(false)">
-          <ArrowUp class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" aria-hidden="true" />
+          <UiIcon
+            name="arrow-up"
+            :size="14"
+            class="mr-2 text-muted-foreground/70"
+            aria-hidden="true"
+          />
           {{ labels.sortAscending }}
         </UiDropdownMenuItem>
         <UiDropdownMenuItem @click="column.toggleSorting(true)">
-          <ArrowDown class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" aria-hidden="true" />
+          <UiIcon
+            name="arrow-down"
+            :size="14"
+            class="mr-2 text-muted-foreground/70"
+            aria-hidden="true"
+          />
           {{ labels.sortDescending }}
         </UiDropdownMenuItem>
       </UiDropdownMenuContent>

package/src/compositions/UiDataTable/UiDataTablePagination.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="TData">
   import type { Table } from '@tanstack/vue-table';
-  import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-vue-next';
   import { UiButton } from '@/primitives/UiButton';
+  import { UiIcon } from '@/primitives/UiIcon';
   import {
     UiDropdownMenu,
     UiDropdownMenuContent,
@@ -109,7 +109,7 @@
           @click="table.setPageIndex(0)"
         >
           <span class="sr-only">{{ labels.goToFirstPage }}</span>
-          <ChevronsLeft class="h-4 w-4" aria-hidden="true" />
+          <UiIcon name="chevrons-left" :size="16" aria-hidden="true" />
         </UiButton>
         <UiButton
           variant="outline"
@@ -119,7 +119,7 @@
           @click="table.previousPage()"
         >
           <span class="sr-only">{{ labels.goToPreviousPage }}</span>
-          <ChevronLeft class="h-4 w-4" aria-hidden="true" />
+          <UiIcon name="chevron-left" :size="16" aria-hidden="true" />
         </UiButton>
         <UiButton
           variant="outline"
@@ -129,7 +129,7 @@
           @click="table.nextPage()"
         >
           <span class="sr-only">{{ labels.goToNextPage }}</span>
-          <ChevronRight class="h-4 w-4" aria-hidden="true" />
+          <UiIcon name="chevron-right" :size="16" aria-hidden="true" />
         </UiButton>
         <UiButton
           variant="outline"
@@ -139,7 +139,7 @@
           @click="table.setPageIndex(table.getPageCount() - 1)"
         >
           <span class="sr-only">{{ labels.goToLastPage }}</span>
-          <ChevronsRight class="h-4 w-4" aria-hidden="true" />
+          <UiIcon name="chevrons-right" :size="16" aria-hidden="true" />
         </UiButton>
       </div>
     </div>

package/src/compositions/UiDatePicker/UiDatePicker.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-  import { Calendar } from 'lucide-vue-next';
   import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
   import type { DateRange, DateValue } from 'reka-ui';
   import { computed, defineAsyncComponent, ref } from 'vue';
   import { cn } from '@/lib/utils';
   import { UiButton } from '@/primitives/UiButton';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { UiPopover, UiPopoverContent, UiPopoverTrigger } from '@/primitives/UiPopover';
   import type { UiDatePickerProps } from './types';
 
@@ -141,7 +141,7 @@
         :disabled="props.disabled"
         :aria-label="props.ariaLabel"
       >
-        <Calendar class="mr-2 size-4 shrink-0" />
+        <UiIcon name="calendar" :size="16" class="mr-2 shrink-0" />
         <span class="truncate">{{ displayValue }}</span>
       </UiButton>
     </UiPopoverTrigger>

package/src/primitives/UiAlert/UiAlert.stories.ts

@@ -29,7 +29,7 @@ import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/
 
 <template>
   <UiAlert>
-    <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+    <UiIcon name="circle-check" :size="16"  />
     <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
     <UiAlertDescription>
       This is an alert with icon, title and description.
@@ -53,7 +53,7 @@ export const Default: Story = {
     },
     template: `
       <UiAlert :variant="args.variant">
-        <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+        <UiIcon name="circle-check" :size="16"  />
         <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
         <UiAlertDescription>
           This is an alert with icon, title and description.
@@ -76,7 +76,7 @@ import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/
 
 <template>
   <UiAlert variant="destructive">
-    <UiIcon icon="i-material-symbols-error" class="size-4" />
+    <UiIcon name="circle-x" :size="16"  />
     <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
     <UiAlertDescription>
       <p>Please verify your billing information and try again.</p>
@@ -102,7 +102,7 @@ export const Destructive: Story = {
     },
     template: `
       <UiAlert variant="destructive">
-        <UiIcon icon="i-material-symbols-error" class="size-4" />
+        <UiIcon name="circle-x" :size="16"  />
         <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
         <UiAlertDescription>
           <p>Please verify your billing information and try again.</p>
@@ -131,7 +131,7 @@ import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/
 <template>
   <div class="flex flex-col gap-4">
     <UiAlert>
-      <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+      <UiIcon name="circle-check" :size="16"  />
       <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
       <UiAlertDescription>
         This is an alert with icon, title and description.
@@ -139,7 +139,7 @@ import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/
     </UiAlert>
 
     <UiAlert variant="destructive">
-      <UiIcon icon="i-material-symbols-error" class="size-4" />
+      <UiIcon name="circle-x" :size="16"  />
       <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
       <UiAlertDescription>
         <p>Please verify your billing information and try again.</p>
@@ -167,7 +167,7 @@ export const AllVariants: Story = {
     template: `
       <div class="flex flex-col gap-4">
         <UiAlert>
-          <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+          <UiIcon name="circle-check" :size="16"  />
           <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
           <UiAlertDescription>
             This is an alert with icon, title and description.
@@ -175,7 +175,7 @@ export const AllVariants: Story = {
         </UiAlert>
 
         <UiAlert variant="destructive">
-          <UiIcon icon="i-material-symbols-error" class="size-4" />
+          <UiIcon name="circle-x" :size="16"  />
           <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
           <UiAlertDescription>
             <p>Please verify your billing information and try again.</p>

package/src/primitives/UiBadge/UiBadge.stories.ts

@@ -5,17 +5,17 @@ import { UiIcon } from '../UiIcon';
 
 const InfoIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-info" class="size-4" />',
+  template: '<UiIcon name="info" :size="16" />',
 };
 
 const XIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-close" class="size-4" />',
+  template: '<UiIcon name="x" :size="16" />',
 };
 
 const CheckIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-check" class="size-4" />',
+  template: '<UiIcon name="check" :size="16" />',
 };
 
 const meta: Meta<typeof UiBadge> = {
@@ -154,7 +154,7 @@ import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
 
 const InfoIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-info" class="size-4" />',
+  template: '<UiIcon name="info" :size="16" />',
 }
 </script>
 
@@ -187,7 +187,7 @@ import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
 
 const XIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-close" class="size-4" />',
+  template: '<UiIcon name="x" :size="16" />',
 }
 </script>
 
@@ -220,12 +220,12 @@ import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
 
 const CheckIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-check" class="size-4" />',
+  template: '<UiIcon name="check" :size="16" />',
 }
 
 const XIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-close" class="size-4" />',
+  template: '<UiIcon name="x" :size="16" />',
 }
 </script>
 
@@ -261,7 +261,7 @@ import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiBadge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
-    <UiIcon icon="i-material-symbols-verified" class="size-3" />
+    <UiIcon name="badge-check" :size="12" />
     Verified
   </UiBadge>
 </template>`;
@@ -274,7 +274,7 @@ export const WithIconSlot: Story = {
     components: { UiBadge, UiIcon },
     template: `
       <UiBadge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
-        <UiIcon icon="i-material-symbols-verified" class="size-3" />
+        <UiIcon name="badge-check" :size="12" />
         Verified
       </UiBadge>
     `,

package/src/primitives/UiButton/UiButton.stories.ts

@@ -4,17 +4,17 @@ import { UiIcon } from '../UiIcon';
 
 const ChevronLeftIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-chevron-left" class="size-4" />',
+  template: '<UiIcon name="chevron-left" :size="16" />',
 };
 
 const ChevronRightIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+  template: '<UiIcon name="chevron-right" :size="16" />',
 };
 
 const MailIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+  template: '<UiIcon name="mail" :size="16" />',
 };
 
 const meta: Meta<typeof UiButton> = {
@@ -256,7 +256,7 @@ import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
 
 const ChevronLeftIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-chevron-left" class="size-4" />',
+  template: '<UiIcon name="chevron-left" :size="16" />',
 }
 </script>
 
@@ -289,7 +289,7 @@ import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
 
 const ChevronRightIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+  template: '<UiIcon name="chevron-right" :size="16" />',
 }
 </script>
 
@@ -322,12 +322,12 @@ import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
 
 const MailIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+  template: '<UiIcon name="mail" :size="16" />',
 }
 
 const ChevronRightIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+  template: '<UiIcon name="chevron-right" :size="16" />',
 }
 </script>
 
@@ -362,7 +362,7 @@ import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
 
 const MailIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+  template: '<UiIcon name="mail" :size="16" />',
 }
 </script>
 
@@ -395,12 +395,12 @@ import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
 
 const MailIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-mail" class="size-4" />',
+  template: '<UiIcon name="mail" :size="16" />',
 }
 
 const ChevronRightIcon = {
   components: { UiIcon },
-  template: '<UiIcon icon="i-material-symbols-chevron-right" class="size-4" />',
+  template: '<UiIcon name="chevron-right" :size="16" />',
 }
 </script>
 
@@ -437,7 +437,7 @@ import { UiButton, UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <UiButton variant="outline" size="sm">
-    <UiIcon icon="i-material-symbols-call-split" class="size-4" />
+    <UiIcon name="git-branch" :size="16" />
     New Branch
   </UiButton>
 </template>`;
@@ -450,7 +450,7 @@ export const WithIconSlot: Story = {
     components: { UiButton, UiIcon },
     template: `
       <UiButton variant="outline" size="sm">
-        <UiIcon icon="i-material-symbols-call-split" class="size-4" />
+        <UiIcon name="git-branch" :size="16" />
         New Branch
       </UiButton>
     `,

package/src/primitives/UiCalendar/UiCalendar.stories.ts

@@ -743,10 +743,10 @@ const defaultPlaceholder = today(getLocalTimeZone())
       </div>
     </template>
     <template #prev-icon>
-      <UiIcon icon="i-material-symbols-chevrons-left" class="size-5 text-red-500" />
+      <UiIcon name="chevrons-left" :size="20" class="text-red-500" />
     </template>
     <template #next-icon>
-      <UiIcon icon="i-material-symbols-chevrons-right" class="size-5 text-red-500" />
+      <UiIcon name="chevrons-right" :size="20" class="text-red-500" />
     </template>
   </UiCalendar>
 </template>`;
@@ -780,10 +780,10 @@ export const CustomHeadingAndCellSize: Story = {
         </div>
       </template>
       <template #prev-icon>
-        <UiIcon icon="i-material-symbols-chevrons-left" class="size-5 text-red-500" />
+        <UiIcon name="chevrons-left" :size="20" class="text-red-500" />
       </template>
       <template #next-icon>
-        <UiIcon icon="i-material-symbols-chevrons-right" class="size-5 text-red-500" />
+        <UiIcon name="chevrons-right" :size="20" class="text-red-500" />
       </template>
     </UiCalendar>`,
   }),

package/src/primitives/UiDropdownMenu/UiDropdownMenu.stories.ts

@@ -696,7 +696,7 @@ const open = ref(false)
   <UiDropdownMenu v-model:open="open">
     <UiDropdownMenuTrigger as-child>
       <UiIconButton aria-label="Open menu" variant="ghost">
-        <UiIcon icon="i-material-symbols-more-vert" class="text-xl" />
+        <UiIcon name="more-vertical" :size="20" />
       </UiIconButton>
     </UiDropdownMenuTrigger>
     <UiDropdownMenuContent>
@@ -740,7 +740,7 @@ export const WithIconButton: Story = {
     template: `<UiDropdownMenu v-model:open="open" :modal="modal">
       <UiDropdownMenuTrigger as-child>
         <UiIconButton aria-label="Open menu" variant="ghost">
-          <UiIcon icon="i-material-symbols-more-vert" class="text-xl" />
+          <UiIcon name="more-vertical" :size="20" />
         </UiIconButton>
       </UiDropdownMenuTrigger>
       <UiDropdownMenuContent>

package/src/primitives/UiIcon/UiIcon.stories.ts

@@ -3,17 +3,27 @@ import { UiIcon } from '.';
 import { UiIconButton } from '../UiIconButton';
 
 /**
- * UiIcon renders a single icon using the design system’s icon set (Material Symbols via UnoCSS preset-icons).
+ * UiIcon renders a single icon from the Lucide icon set.
  * Use it for consistent sizing, styling, and accessibility semantics across the UI library.
+ *
+ * @see https://lucide.dev/icons for available icons
  */
 const meta: Meta<typeof UiIcon> = {
   title: 'Primitives/UiIcon',
   component: UiIcon,
   tags: ['autodocs'],
   argTypes: {
-    icon: {
+    name: {
       control: 'text',
-      description: 'Icon class, e.g. `i-material-symbols-help`.',
+      description: 'Lucide icon name in kebab-case, e.g. `circle-help`, `chevron-down`.',
+    },
+    size: {
+      control: 'number',
+      description: 'Icon size in pixels. Defaults to 24.',
+    },
+    strokeWidth: {
+      control: 'number',
+      description: 'Stroke width. Defaults to 2.',
     },
     ariaLabel: {
       control: 'text',
@@ -21,7 +31,9 @@ const meta: Meta<typeof UiIcon> = {
     },
   },
   args: {
-    icon: 'i-material-symbols-help',
+    name: 'circle-help',
+    size: 24,
+    strokeWidth: 2,
     ariaLabel: 'Help',
   },
 };
@@ -35,14 +47,14 @@ import { UiIcon } from '@aleph-alpha/ui-library'
 
 <template>
   <div class="flex items-center gap-4">
-    <UiIcon icon="i-material-symbols-help" aria-label="Help" class="text-xl text-foreground" />
-    <UiIcon icon="i-material-symbols-keyboard-arrow-down" aria-label="Down" class="text-xl text-foreground" />
-    <UiIcon icon="i-material-symbols-check" aria-label="Check" class="text-xl text-foreground" />
+    <UiIcon name="circle-help" aria-label="Help" class="text-foreground" />
+    <UiIcon name="chevron-down" aria-label="Down" class="text-foreground" />
+    <UiIcon name="check" aria-label="Check" class="text-foreground" />
   </div>
 </template>`;
 
 /**
- * Basic icon rendering with Material Symbols.
+ * Basic icon rendering with Lucide icons.
  * Use this as a starting point for choosing an icon and verifying size/color alignment in your layout.
  */
 export const Default: Story = {
@@ -53,9 +65,9 @@ export const Default: Story = {
     },
     template: `
       <div class="flex items-center gap-4">
-        <UiIcon v-bind="args" class="text-xl text-foreground" />
-        <UiIcon icon="i-material-symbols-keyboard-arrow-down" aria-label="Down" class="text-xl text-foreground" />
-        <UiIcon icon="i-material-symbols-check" aria-label="Check" class="text-xl text-foreground" />
+        <UiIcon v-bind="args" class="text-foreground" />
+        <UiIcon name="chevron-down" aria-label="Down" class="text-foreground" />
+        <UiIcon name="check" aria-label="Check" class="text-foreground" />
       </div>
     `,
   }),
@@ -64,13 +76,47 @@ export const Default: Story = {
   },
 };
 
+const sizesTemplateSource = `<script setup lang="ts">
+import { UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <UiIcon name="star" :size="16" />
+    <UiIcon name="star" :size="24" />
+    <UiIcon name="star" :size="32" />
+    <UiIcon name="star" :size="48" />
+  </div>
+</template>`;
+
+/**
+ * Icons can be rendered at different sizes using the `size` prop.
+ */
+export const Sizes: Story = {
+  render: () => ({
+    components: { UiIcon },
+    template: `
+      <div class="flex items-center gap-4">
+        <UiIcon name="star" :size="16" />
+        <UiIcon name="star" :size="24" />
+        <UiIcon name="star" :size="32" />
+        <UiIcon name="star" :size="48" />
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { code: sizesTemplateSource } },
+  },
+};
+
 const iconButtonTemplateSource = `<script setup lang="ts">
 import { UiIconButton, UiIcon } from '@aleph-alpha/ui-library'
 </script>
 
 <template>
   <UiIconButton aria-label="Close">
-    <UiIcon icon="i-material-symbols-close" class="text-xl" />
+    <UiIcon name="x" :size="20" />
   </UiIconButton>
 </template>`;
 
@@ -84,7 +130,7 @@ export const InIconButton: Story = {
     components: { UiIconButton, UiIcon },
     template: `
       <UiIconButton aria-label="Close">
-        <UiIcon icon="i-material-symbols-close" class="text-xl" />
+        <UiIcon name="x" :size="20" />
       </UiIconButton>
     `,
   }),