From fc714a5f303cb443b52799090db0cdffa7a1e7bb Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sun, 15 Feb 2026 21:31:00 +0100
Subject: [PATCH] feat(package/ui): os-icon (#9234)

---
 packages/ui/PROJEKT.md                        | 410 ++++++------------
 packages/ui/eslint.config.ts                  |   7 +
 packages/ui/package.json                      |  17 +-
 packages/ui/playwright.config.ts              |   2 +-
 packages/ui/scripts/check-completeness.ts     | 123 ++++--
 .../components/OsButton/OsButton.stories.ts   | 174 ++++----
 .../ui/src/components/OsIcon/OsIcon.spec.ts   | 225 ++++++++++
 .../src/components/OsIcon/OsIcon.stories.ts   | 143 ++++++
 .../components/OsIcon/OsIcon.visual.spec.ts   | 100 +++++
 packages/ui/src/components/OsIcon/OsIcon.vue  | 119 +++++
 .../__screenshots__/chromium/all-sizes.png    | Bin 0 -> 3063 bytes
 .../chromium/all-system-icons.png             | Bin 0 -> 4636 bytes
 .../chromium/custom-component.png             | Bin 0 -> 1471 bytes
 .../__screenshots__/chromium/in-button.png    | Bin 0 -> 6266 bytes
 .../chromium/inherit-color.png                | Bin 0 -> 2226 bytes
 .../ui/src/components/OsIcon/icon.variants.ts |  10 +
 .../ui/src/components/OsIcon/icons/index.ts   |  17 +
 .../components/OsIcon/icons/svgs/check.svg    |   3 +
 .../components/OsIcon/icons/svgs/close.svg    |   3 +
 .../src/components/OsIcon/icons/svgs/plus.svg |   3 +
 packages/ui/src/components/OsIcon/index.ts    |   3 +
 packages/ui/src/components/index.ts           |   9 +
 .../src/ocelot/icons/OcelotIcons.stories.ts   |  46 ++
 .../ocelot/icons/OcelotIcons.visual.spec.ts   |  73 ++++
 .../__screenshots__/chromium/all-icons.png    | Bin 0 -> 9187 bytes
 packages/ui/src/ocelot/icons/index.spec.ts    |  62 +++
 packages/ui/src/ocelot/icons/index.ts         |  24 +
 .../ui/src/ocelot/icons/svgs/angle-down.svg   |   5 +
 packages/ui/src/ocelot/index.ts               |   2 +
 packages/ui/src/plugins/vite-svg-icon.ts      |  64 +++
 packages/ui/src/styles/index.css              |   1 +
 packages/ui/src/svg-icon.d.ts                 |   6 +
 packages/ui/vite.config.ts                    |   8 +-
 webapp/components/AvatarMenu/AvatarMenu.vue   |   8 +-
 .../Chat/AddChatRoomByUserSearch.vue          |   5 +-
 webapp/components/Chat/Chat.vue               |   6 +-
 .../ContributionForm/ContributionForm.vue     |   5 +-
 .../DropdownFilter/DropdownFilter.vue         |   8 +-
 webapp/components/Embed/EmbedComponent.vue    |   5 +-
 .../FilterMenu/CategoriesFilter.vue           |   5 +-
 .../components/FilterMenu/EventsByFilter.vue  |   5 +-
 webapp/components/FilterMenu/FilterMenu.vue   |   9 +-
 .../components/FilterMenu/FollowingFilter.vue |   5 +-
 webapp/components/FilterMenu/HeaderButton.vue |   6 +-
 .../HashtagsFilter/HashtagsFilter.vue         |   6 +-
 .../components/LocaleSwitch/LocaleSwitch.vue  |   8 +-
 webapp/components/Modal/ReportModal.vue       |   5 +-
 webapp/components/Select/LocationSelect.vue   |   6 +-
 webapp/components/Uploader/ImageUploader.vue  |   5 +-
 .../features/Invitations/CreateInvitation.vue |   6 +-
 .../CreateInvitation.spec.js.snap             |  26 +-
 .../__snapshots__/InvitationList.spec.js.snap |  26 +-
 .../SearchableInput/SearchableInput.vue       |   5 +-
 webapp/jest.config.js                         |   1 +
 webapp/nuxt.config.js                         |   1 +
 .../_id/__snapshots__/_slug.spec.js.snap      |  78 +++-
 webapp/pages/groups/_id/_slug.vue             |   5 +-
 .../_id/__snapshots__/invites.spec.js.snap    |  13 +-
 webapp/pages/groups/index.vue                 |   5 +-
 webapp/pages/index.vue                        |   5 +-
 .../_id/__snapshots__/_slug.spec.js.snap      |  26 +-
 webapp/pages/profile/_id/_slug.vue            |   5 +-
 webapp/pages/settings/index.vue               |   5 +-
 .../settings/my-email-address/enter-nonce.vue |   6 +-
 .../pages/settings/my-email-address/index.vue |   5 +-
 .../__mocks__/@ocelot-social/ui/ocelot.js     |  82 ++++
 66 files changed, 1560 insertions(+), 496 deletions(-)
 create mode 100644 packages/ui/src/components/OsIcon/OsIcon.spec.ts
 create mode 100644 packages/ui/src/components/OsIcon/OsIcon.stories.ts
 create mode 100644 packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts
 create mode 100644 packages/ui/src/components/OsIcon/OsIcon.vue
 create mode 100644 packages/ui/src/components/OsIcon/__screenshots__/chromium/all-sizes.png
 create mode 100644 packages/ui/src/components/OsIcon/__screenshots__/chromium/all-system-icons.png
 create mode 100644 packages/ui/src/components/OsIcon/__screenshots__/chromium/custom-component.png
 create mode 100644 packages/ui/src/components/OsIcon/__screenshots__/chromium/in-button.png
 create mode 100644 packages/ui/src/components/OsIcon/__screenshots__/chromium/inherit-color.png
 create mode 100644 packages/ui/src/components/OsIcon/icon.variants.ts
 create mode 100644 packages/ui/src/components/OsIcon/icons/index.ts
 create mode 100644 packages/ui/src/components/OsIcon/icons/svgs/check.svg
 create mode 100644 packages/ui/src/components/OsIcon/icons/svgs/close.svg
 create mode 100644 packages/ui/src/components/OsIcon/icons/svgs/plus.svg
 create mode 100644 packages/ui/src/components/OsIcon/index.ts
 create mode 100644 packages/ui/src/ocelot/icons/OcelotIcons.stories.ts
 create mode 100644 packages/ui/src/ocelot/icons/OcelotIcons.visual.spec.ts
 create mode 100644 packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png
 create mode 100644 packages/ui/src/ocelot/icons/index.spec.ts
 create mode 100644 packages/ui/src/ocelot/icons/index.ts
 create mode 100755 packages/ui/src/ocelot/icons/svgs/angle-down.svg
 create mode 100644 packages/ui/src/ocelot/index.ts
 create mode 100644 packages/ui/src/plugins/vite-svg-icon.ts
 create mode 100644 packages/ui/src/svg-icon.d.ts
 create mode 100644 webapp/test/__mocks__/@ocelot-social/ui/ocelot.js

diff --git a/packages/ui/PROJEKT.md b/packages/ui/PROJEKT.md
index 96fedf07e..f3a992e48 100644
--- a/packages/ui/PROJEKT.md
+++ b/packages/ui/PROJEKT.md
@@ -81,10 +81,10 @@ Phase 0: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 1: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 2: ██████████ 100% (26/26 Aufgaben) ✅
 Phase 3: ██████████ 100% (24/24 Aufgaben) ✅ - Webapp-Integration komplett
-Phase 4: █░░░░░░░░░   6% (1/17 Aufgaben) - OsButton ✅
+Phase 4: ██░░░░░░░░  18% (3/17 Aufgaben) - OsButton ✅, OsIcon ✅, System-Icons ✅
 Phase 5: ░░░░░░░░░░   0% (0/7 Aufgaben)
 ───────────────────────────────────────
-Gesamt:  ████████░░  74% (63/86 Aufgaben)
+Gesamt:  ████████░░  76% (65/86 Aufgaben)
 ```
 
 ### Katalogisierung (Details in KATALOG.md)
@@ -115,21 +115,49 @@ OsButton Features:
 as-Prop Migration:  15 <nuxt-link>/<a>-Wrapper in 15 Webapp-Dateien → as="nuxt-link"/as="a"
 ```
 
+### OsIcon (Phase 4)
+```
+OsIcon Features:
+├─ name:       ✅ System-Icon per Name (check, close, plus)
+├─ icon:       ✅ Custom Vue-Komponente (hat Vorrang vor name)
+├─ size:       ✅ xs, sm, md, lg, xl, 2xl (em-basiert)
+├─ a11y:       ✅ decorative (default) / semantic (mit aria-label)
+├─ color:      ✅ fill-current (erbt von Parent)
+└─ svg-plugin: ✅ vite-svg-icon (SVG → Vue Component via ?icon)
+
+System-Icons:
+├─ check.svg   (Checkmark)
+├─ close.svg   (Close/X)
+└─ plus.svg    (Plus/Add)
+
+Ocelot-Icons (separates Entry-Point):
+└─ angle-down.svg (Dropdown-Pfeil)
+```
+
 ---
 
 ## Aktueller Stand
 
-**Letzte Aktualisierung:** 2026-02-14 (Session 20)
+**Letzte Aktualisierung:** 2026-02-15 (Session 21)
 
-**Aktuelle Phase:** Phase 3 ✅ ABGESCHLOSSEN + Code-Review-Feedback + `as`-Prop-Migration
+**Aktuelle Phase:** Phase 4 - OsIcon ✅ implementiert, System-Icons eingerichtet
 
-**Abgeschlossene Phasen:**
-- [x] Phase 0: Analyse (177 Komponenten katalogisiert)
-- [x] Phase 1: Vue 2.7 Upgrade (2.6.14 → 2.7.16, 979 Tests ✅)
-- [x] Phase 2: Projekt-Setup (Vite, vue-demi, Tailwind v4, CVA, Storybook 10, CI/CD, 100% Coverage)
-- [x] Phase 3: Webapp-Integration — 133 os-button in 79 Dateien, 0 base-button/ds-button verbleibend
+**Zuletzt abgeschlossen (Session 21 - OsIcon Komponente, System-Icons, Ocelot-Umbenennung):**
+- [x] OsIcon Komponente implementiert (name, icon, size Props; Vue 2/3 via vue-demi h())
+- [x] System-Icons: check, close, plus (SVG, viewBox 0 0 32 32, stroke-basiert)
+- [x] Custom vite-svg-icon Plugin: SVG → Vue Render-Function via `?icon` Query
+- [x] Icon-Größen: xs(0.75em), sm(0.875em), md(1.2em), lg(1.5em), xl(2em), 2xl(2.5em)
+- [x] A11y: decorative (aria-hidden, default) / semantic (role="img" + aria-label)
+- [x] fill-current für Farbvererbung vom Parent
+- [x] OsButton nutzt OsIcon statt inline SVG für Icon-Rendering
+- [x] Ocelot-Icons: separates Entry-Point (ocelot.mjs) mit dynamischem Loading via import.meta.glob
+- [x] `src/webapp/` → `src/ocelot/` umbenannt (konsistentes Naming)
+- [x] check-completeness erweitert: unterstützt ocelot/ Verzeichnis
+- [x] OsIcon: 211 Zeilen Unit-Tests, Visual Tests mit checkA11y(), Keyboard A11y
+- [x] 100% Test-Coverage für OsIcon
+- [x] OsButton Stories bereinigt (OsIcon statt Inline-SVGs)
 
-**Zuletzt abgeschlossen (Session 20 - `as`-Prop + nuxt-link Migration):**
+**Zuvor abgeschlossen (Session 20 - `as`-Prop + nuxt-link Migration):**
 - [x] OsButton: `as` Prop implementiert (polymorphe Komponente: `button`, `a`, `nuxt-link`, `router-link`, Custom-Komponenten)
 - [x] Naming-Konvention: `tag` → `as` (moderner Standard: Headless UI, Radix Vue, Chakra UI, PrimeVue)
 - [x] `disabled`/`type`/`loading` nur bei `as="button"` (Links haben kein natives `disabled`-Attribut)
@@ -146,246 +174,34 @@ as-Prop Migration:  15 <nuxt-link>/<a>-Wrapper in 15 Webapp-Dateien → as="nuxt
   - NotificationMenu.vue (3 Instanzen, 2 zu einem Button konsolidiert via counter-icon)
 - [x] Verifiziert: 0 verbleibende `<nuxt-link>`/`<a>`-Wrapper um `<os-button>` in Webapp
 
-**Zuvor abgeschlossen (Session 19 - CodeRabbit Review Feedback: Cleanup, Accessibility, Bugfixes):**
-- [x] donations.vue: Redundantes `:checked="showDonations"` entfernt (v-model setzt checked bereits)
-- [x] MySomethingList.vue: Disabled-Logik vereinfacht `!(!isEditing || (isEditing && !disabled))` → `isEditing && disabled`
-- [x] button.variants.ts: Hardcoded Fallback `#e5e3e8` entfernt → `var(--color-disabled)` (konsistent mit filled/index.css)
-- [x] CommentCard.vue: `aria-label` auf icon-only Reply-Button
-- [x] HashtagsFilter.vue: `aria-label` auf icon-only Clear-Button
-- [x] ReleaseModal.vue: `$emit('close')` im catch-Block ergänzt (fehlte im Fehlerfall)
-- [x] Chat.vue: `aria-label` auf Expand- und Close-Buttons
-- [x] i18n: `chat.expandChat` + `chat.closeChat` in allen 9 Sprachdateien (vollständig übersetzt)
-- [x] ChatNotificationMenu.vue: `aria-label` auf icon-only Chat-Button
-- [x] SearchableInput.vue: `aria-label` auf icon-only Close-Button
-- [x] GroupButton.vue: `aria-label` auf icon-only Groups-Button
-- [x] MapButton.vue: `aria-label` auf icon-only Map-Button
-- [x] EmotionButton.vue: `aria-label` auf icon-only Emoji-Button (`<label for>` wirkt nicht auf `<button>`)
-- [x] ImageUploader.vue: `aria-label` auf icon-only Delete-Button
-- [x] i18n: `actions.clear` disambiguiert — es: "Borrar" → "Limpiar", it: "Cancella" → "Svuota" (Verwechslung mit `actions.delete`)
-- [x] OsButton.vue: `as string` Cast bei `attrClass` entfernt (cn/clsx verarbeitet Arrays/Objekte korrekt)
-- [x] CommentForm.vue: `handleSubmit` auf async/await + try/catch/finally umgestellt (Loading-Bug im Fehlerfall behoben)
-- [x] MenuBar.vue: `aria-label` auf alle 11 Editor-Toolbar-Buttons (nutzt bestehende `editor.legend.*` Keys)
-- [x] NotificationMenu.vue: `aria-label` auf alle 3 Bell-Buttons
-- [x] NotificationMenu.vue: `counter-icon` von Default-Slot in `#icon`-Slot verschoben (2 Stellen, Rendering-Bug)
-- [x] ChatNotificationMenu.vue: `counter-icon` von Default-Slot in `#icon`-Slot verschoben (Rendering-Bug)
-- [x] InviteButton.vue: `this.currentUser` → `this.user` (Bug: Getter hieß `user`, `currentUser` war undefined)
-- [x] pages/index.vue: `beforeDestroy()` aus `methods` in Lifecycle-Hook verschoben (Memory-Leak: Event-Listener wurden nie entfernt)
-- [x] Editor.vue: Fehlender `else`-Branch in `toggleLinkInput()` — `isLinkInputActive` wird jetzt auch bei no-args-Aufrufen (blur/esc) zurückgesetzt
-- [x] admin/users/index.vue: Veraltete Slot-Syntax `slot="role" slot-scope="scope"` → `#role="scope"` (Vue 3)
-- [x] settings/index.vue: Irreführender Komponentenname `NewsFeed` → `Settings`
-- [x] FilterMenu.spec.js: Typo `dropdwon` → `dropdown` im Testnamen
-- [x] ImageUploader.vue: `:title` auf Crop-Cancel-Button ergänzt (konsistent mit Delete-Button)
-- [x] OsButton.spec.ts: `as const` auf `sizes`-Objekt statt Type-Cast bei jedem `mount`-Aufruf
-- [x] CommentForm.vue: `disabled = false` aus `finally` in `catch` verschoben (verhindert Überschreiben nach `clear()`)
-- [x] FilterMenu.vue: `aria-label` auf icon-only Filter-Button
-- [x] ContextMenu.vue: `this.menu.show()` nur bei `type !== 'link'` (Link-Menüs öffneten sich sofort statt auf Klick zu warten)
-- [x] ContextMenu.vue: `this.menu = null` vor `destroy()` (Race-Condition: ESC + blur feuerten doppelt → removeChild-Error)
-- [x] CustomButton.vue: `variant="primary"` auf beide `os-button`-Instanzen (Konsistenz mit restlicher Codebase)
-- [x] Invitation.vue: Ungenutztes Argument `inviteCode.copy` bei `copyInviteCode()` entfernt
-- [x] CtaUnblockAuthor.vue: `appearance="filled"` explizit gesetzt (fehlte als einziger primärer CTA)
-- [x] HeaderMenu.vue: `beforeDestroy`-Hook ergänzt — Scroll-Listener wird jetzt entfernt (Memory-Leak)
-- [x] MenuLegend.vue: `variant="primary"` auf Trigger-Button (konsistent mit Toolbar-Buttons in MenuBar.vue)
+**Zuvor erledigt (auf master gemergt):**
+- [x] `os-button` CSS-Klasse auf Button-Element für Branding-Kompatibilität (#9211)
+- [x] eslint-config-it4c v0.11.2 Update: Flat Config, path alias #src, CSS-Linting (#9233)
+- [x] Release @ocelot-social/ui v0.0.2
+- [x] Release v3.14.1
 
-**Zuvor abgeschlossen (Session 18 - CodeRabbit Review Feedback: data-test Selektoren, Accessibility, Bugfixes):**
-- [x] Cypress-Selektoren: `.user-content-menu button` → `[data-test="content-menu-button"]` (2 Step-Definitions)
-- [x] Cypress-Selektoren: `.content-menu button` → `[data-test="content-menu-button"]` (Admin.PinPost + ReportContent)
-- [x] muted-users.vue: `data-test="unmute-btn"` + `aria-label` auf Unmute-Button
-- [x] blocked-users.vue: `data-test="unblock-btn"` + `aria-label` auf Unblock-Button
-- [x] ProfileList.vue: `data-test="load-all-connections-btn"` + FollowList.spec.js Selektoren aktualisiert
-- [x] FollowButton.vue: `data-test="follow-btn"` + Spec-Selektoren aktualisiert
-- [x] JoinLeaveButton.vue: `data-test="join-leave-btn"` + `.native` von `@mouseenter`/`@mouseleave` entfernt
-- [x] LoginButton.vue: `data-test="login-btn"` + `aria-label="$t('login.login')"` + Spec-Selektoren aktualisiert
-- [x] ReportRow.spec.js: `button[data-variant="danger"]` → `[data-test="confirm"]`
-- [x] CtaJoinLeaveGroup.spec.js: Selektor auf `[data-test="join-leave-btn"]` aktualisiert
-- [x] DisableModal.vue: `finally { this.loading = false }` für Loading-State-Reset
-- [x] ReleaseModal.vue: `:loading="loading"` + `this.loading = true` + `finally { this.loading = false }`
-- [x] ChangePassword.vue: `:disabled="errors"` → `:disabled="!!errors"` (Boolean-Cast)
-- [x] Password/Change.vue: Unbenutzte `disabled: true` aus data() entfernt + 2 tote Tests entfernt
-- [x] MenuBar.vue: Unbenutztes `ref="linkButton"` entfernt
-- [x] GroupForm.vue: Cancel-Button `variant="default" appearance="filled"` (per User-Anweisung)
-- [x] `appearance="filled"` ergänzt: donations.vue, LoginForm.vue, EnterNonce.vue
-- [x] LoginForm.vue: CSS `.login-form button` → `.login-form button[type='submit']`
-- [x] pages/index.vue: Redundantes `class="my-filter-button"` von `<base-icon>` entfernt
-- [x] MySomethingList.vue: `:title` + `:aria-label` auf Edit/Delete-Buttons (Tooltip beibehalten)
-- [x] A11y aria-label auf icon-only Buttons: admin/users (search + edit), AddChatRoomByUserSearch (close), EmbedComponent (close), groups/index (create), profile/_id/_slug (new post), groups/_id/_slug (new post), CustomButton (2x tooltip), HeaderMenu (hamburger), ImageUploader (crop-cancel), ContentMenu (menu), HeaderButton (filter-remove), InviteButton (invite)
-- [x] post/_id/_slug/index.vue: Zustandsabhängiges `aria-label` (`post.sensitiveContent.show/hide`)
-- [x] ComponentSlider.vue: `aria-label` mit Interpolation (`component-slider.step`)
-- [x] i18n: `actions.search`, `actions.close`, `actions.menu` in allen 9 Sprachdateien
-- [x] i18n: `site.navigation` in allen 9 Sprachdateien
-- [x] i18n: `post.sensitiveContent.show/hide` in allen 9 Sprachdateien
-- [x] i18n: `component-slider.step` in allen 9 Sprachdateien
+**Abgeschlossene Phasen:**
+- [x] Phase 0: Analyse (177 Komponenten katalogisiert)
+- [x] Phase 1: Vue 2.7 Upgrade (2.6.14 → 2.7.16, 979 Tests ✅)
+- [x] Phase 2: Projekt-Setup (Vite, vue-demi, Tailwind v4, CVA, Storybook 10, CI/CD, 100% Coverage)
+- [x] Phase 3: Webapp-Integration — 133 os-button in 79 Dateien, 0 base-button/ds-button verbleibend
 
-**Zuvor abgeschlossen (Session 17 - Code-Review Feedback, OsButton Refactoring, Accessibility):**
-- [x] OsButton.vue vereinfacht: `vueAttrs()` Helper, Einmal-Variablen durch `cn()` ersetzt, `children` Array inline (217→227 Zeilen, aber lesbarer)
-- [x] OsButton: `@import "./animations.css"` vor `@source`-Direktiven verschoben (CSS-Spec-Konformität)
-- [x] CustomButton.vue: `isEmpty` aus `data()` entfernt → direkter Import im Computed
-- [x] notifications.spec.js: Doppelten `beforeEach` konsolidiert, `wrapper` in `describe`-Block verschoben
-- [x] MenuLegend.vue: `<style scoped>` hinzugefügt (verhindert Style-Leaking generischer Klassennamen)
-- [x] LocationSelect: `data-test="clear-location-button"` + spezifischerer Selektor im Spec
-- [x] HashtagsFilter: `data-test="clear-search-button"` + spezifischerer Selektor im Spec
-- [x] FollowButton.vue: `.native` Modifier von `@mouseenter`/`@mouseleave` entfernt (Vue 3 Kompatibilität)
-- [x] MapButton.vue: Icon in `<template #icon>` verschoben + redundantes Inline-Style entfernt
-- [x] MySomethingList.vue: Unbenutzte `.icon-button` CSS-Klasse entfernt
-- [x] PaginationButtons.vue: Hardcoded `aria-label` → `$t('pagination.previous/next')` (i18n)
-- [x] `pagination.previous/next` in allen 9 Sprachdateien angelegt
-- [x] GroupContentMenu.vue: `aria-label` via `$t('group.contentMenu.menuButton')` für icon-only Button
-- [x] `group.contentMenu.menuButton` in allen 9 Sprachdateien angelegt
-- [x] FilterMenu.vue: Veraltete `slot="default"` + `slot-scope` → `<template #default="{ toggleMenu }">` (Vue 3)
-- [x] HashtagsFilter.vue: `this.$t()` → `$t()` im Template (Vue 3 Kompatibilität)
-- [x] DisableModal.vue: `appearance="filled"` + `:loading="loading"` auf Danger-Button
-- [x] DeleteUserModal.vue: `appearance="filled"` + `:loading="loading"` auf Danger-Button
-- [x] my-email-address/index.vue: `loadingData` State + `:loading` auf Submit-Button + `finally` Block
-- [x] ReportModal.vue: `class="report-modal"` + CSS-Selektoren mit Prefix (verhindert globales Style-Leaking)
-- [x] DeleteUserModal.vue: CSS-Selektoren mit `.delete-user-modal` Prefix (verhindert globales Style-Leaking)
-- [x] Button-Wrapper-Analyse: GroupButton + MapButton als Kandidaten zum Inlining identifiziert (nur 1 Nutzungsort, keine Logik)
-
-**Zuvor abgeschlossen (Session 16 - Bugfixes, Code-Review, letzte ds-button Migration):**
-- [x] Password/Change.vue: `!!errors` Fix für disabled-Prop
-- [x] CommentForm.vue: `type="submit"` + `!!errors` Fix
-- [x] GroupForm.vue: Letzter `<ds-button>` → `<os-button>` migriert (save/update mit icon)
-- [x] OsButton.spec.ts: TypeScript-Fix für size-Prop Union Type
-- [x] OsButton.vue: v8 ignore Coverage-Fixes (100% Branch Coverage)
-- [x] 0 `<ds-button>` und 0 `<base-button>` in Webapp-Templates verbleibend
-- [x] `data-variant` Attribut auf OsButton (konsistent mit `data-appearance`, CSS-Selektor-Support)
-- [x] notifications.spec.js: `wrapper.find()` → Testing Library `screen.getByText()` (war Vue Test Utils API)
-- [x] FilterMenu.vue: Dynamische `:appearance="filterActive ? 'filled' : 'ghost'"` (Regressionsbug)
-- [x] FilterMenu.spec.js: `data-appearance="filled"` statt CSS-Klasse `--filled`
-- [x] CtaUnblockAuthor.vue: `require` → `required` Typo-Fix
-- [x] LocationSelect.vue: `clearLocationName()` direkt via `this.currentValue` statt `event.target.value`
-- [x] LocationSelect.vue: `@click.native` → `@click` (Vue 3 Kompatibilität)
-- [x] LocationSelect.vue: `aria-label` via `$t('actions.clear')` (i18n)
-- [x] `actions.clear` in allen 9 Sprachdateien angelegt (en, de, fr, es, it, nl, pl, pt, ru)
-- [x] OsButton: JSDoc-Dokumentation für Slots (`@slot default`, `@slot icon`)
-- [x] OsButton: `isSmall` von `['xs', 'sm']` auf `size === 'sm'` vereinfacht (xs existiert nicht)
-- [x] OsButton: Strikte Typisierung `Record<Size, ...>` statt `Record<string, ...>` für Lookup-Maps
-- [x] animations.css: Stylelint-konforme Formatierung (eine Deklaration pro Zeile)
-
-**Zuvor abgeschlossen (Session 15 - Milestone 4c komplett):**
-- [x] **Alle verbleibenden base-button Instanzen migriert** (132 os-button Tags, 0 base-button verbleibend)
-- [x] 59 Buttons in dieser Session migriert (Chat, Filter, Modals, Forms, Pages, etc.)
-- [x] `type="submit"` für alle Form-Buttons (OsButton default ist `type="button"`)
-- [x] `!!errors` Boolean-Cast für disabled-Props (errors ist Objekt, nicht Boolean)
-- [x] CSS-Selektoren `.base-button` → `> button` oder `button` angepasst
-- [x] `!important` für CSS-Positioning (überschreibt Tailwind-Klassen)
-- [x] Disabled outline border-color Fix (`var(--color-disabled-border,#e5e3e8)`)
-- [x] ComponentSlider Selection-Dots: dynamic appearance + 18px custom CSS
-- [x] pages/index.vue FAB: `size="xl"` + position/dimension `!important`
-- [x] pages/groups FAB: `size="xl"` + box-shadow `!important`
-- [x] ReportModal Breite auf 700px beibehalten
-- [x] ContributionForm Submit: `type="submit"` + `!!errors` Fix
-- [x] my-email-address/index.vue: `!!errors` Fix
-
-**Zuvor abgeschlossen (Session 14 - Loading Prop, Circle Prop, Code-Optimierung):**
-- [x] `loading` Prop mit animiertem SVG-Spinner implementiert
-- [x] Spinner-Architektur: Beide Animationen (rotate + dash) auf `<circle>` Element (Chrome-Compositing-Bug-Workaround)
-- [x] Spinner zentriert auf Icon (Icon-Buttons) oder Button-Container (Text-Only-Buttons)
-- [x] Icon bleibt bei loading sichtbar, Spinner überlagert Icon-Bereich
-- [x] `aria-busy="true"` für Screenreader bei loading
-- [x] `circle` Prop implementiert (rounded-full, größenabhängige Breiten)
-- [x] `min-width` pro Größe hinzugefügt (verhindert zu kleine leere Buttons)
-- [x] Animations-Keyframes in `animations.css` ausgelagert (wiederverwendbar)
-- [x] Code-Optimierung: OsButton von ~250 auf 207 Zeilen vereinfacht
-  - `buttonData` Objekt für Vue 2/3 geteilt
-  - `SPINNER_PX` vereinfacht (Tuple → einfache Zahlen)
-  - Redundante `cn()` Wrapping entfernt
-  - `getCurrentInstance()` nur bei Vue 2 aufgerufen
-- [x] 76 Unit-Tests (5 neue: default type, data-appearance, min-w, icon-only loading, circle gap)
-- [x] Loading-Stories in Storybook (alle Varianten × Appearances)
-- [x] Visual Tests mit `animationPlayState = 'paused'` für stabile Screenshots
-- [x] PaginationButtons.vue migriert (2 circle icon-only Buttons)
-
-**Zuvor abgeschlossen (Session 13 - Icon-Slot, Storybook Playground, Webapp-Migration):**
-- [x] Icon-Slot für OsButton implementiert (slot-basiert, icon-system-agnostisch)
-- [x] Render-Funktion: `slots.icon?.()` → `<span class="os-button__icon">` Wrapper
-- [x] Tailwind-Klassen direkt auf Icon-Wrapper (kein custom CSS in index.css nötig)
-- [x] VNode-basierte Text-Erkennung: Whitespace-only = icon-only (gap/margin-Logik)
-- [x] Storybook: 4 neue Stories (Icon, IconOnly, IconSizes, IconAppearances)
-- [x] Playground: Reaktiver Icon-Selektor (none/check/close/plus) + Label-Text-Control
-- [x] Visual Tests: 4 neue Tests mit Screenshots + a11y-Checks
-- [x] Unit Tests: 8 neue Tests (icon slot, keyboard a11y mit aria-label)
-- [x] Erste Webapp-Migration mit Icon: `my-email-address/index.vue` (Save-Button mit check-Icon)
-- [x] Code-Optimierung: ICON_CLASS Konstante, iconMargin Variable, vereinfachte hasText-Logik
-- [x] Größenabhängiger Gap: `gap-1` für xs/sm, `gap-2` für md/lg/xl
-- [x] Größenabhängiger Icon-Margin: kein negativer Margin bei xs/sm (mehr Abstand zur Button-Grenze)
-- [x] 6 weitere Buttons mit Icon migriert: DisableModal, DeleteUserModal, CtaUnblockAuthor, LocationSelect, CategoriesSelect, profile Chat
-- [x] verify.vue hat keinen Button (Eintrag korrigiert)
-
-**Zuvor abgeschlossen (Session 12 - CSS-Linting, CI-Optimierung, Code-Review Fixes):**
-- [x] CSS-Linting: `@eslint/css` + `tailwind-csstree` für Tailwind v4 Syntax-Support
-- [x] `excludeCSS()` Helper: JS-Regeln von CSS-Dateien fernhalten (language-Inkompatibilität)
-- [x] CSS-Regeln: `no-empty-blocks`, `no-duplicate-imports`, `no-invalid-at-rules`
-- [x] CI-Workflow-Trigger optimiert: 9 UI-Workflows von `on: push` auf Branch+Path-Filter (`master`, `packages/ui/**`)
-- [x] `custom-class` → `class` Migration: 4 Stellen in 3 Webapp-Dateien (notifications, MapStylesButtons, EmbedComponent)
-- [x] Vue 3 Template-Fix: `this.$t()` → `$t()` in CommentCard.vue (Zeile 5 + 58)
-- [x] Pre-existing Fix: `async` Arrow-Function in OsButton.visual.spec.ts
-
-**Zuvor abgeschlossen (Session 11 - Storybook & Code-Review Fixes):**
-- [x] Wasserfarben-Farbschema für Storybook (Ultramarin, Dioxazin-Violett, Alizarin, Ocker, Viridian, Cöruleum)
-- [x] Stories erweitert: Playground (interaktive Controls), alle Varianten in allen Stories
-- [x] Einzelne Stories (Primary, Secondary, Danger, Default) durch AllVariants ersetzt
-- [x] AllAppearances zeigt alle 7 Varianten × 3 Appearances
-- [x] Einheitlicher Border (0.8px) über alle Appearances (kein Layout-Shift mehr)
-- [x] WCAG 2.4.7 Fix: Default-Variante hat jetzt `focus:outline-dashed focus:outline-current`
-- [x] Keyboard Accessibility Test: prüft Focus-Indikator auf allen Buttons im Browser
-- [x] `data-appearance` Attribut: robuste CSS-Selektoren statt fragile escaped Tailwind-Klassen
-- [x] Code-Review Feedback eingearbeitet (Unit-Tests, Testnamen, CSS-Selektoren)
-
-**Zuvor abgeschlossen (Sessions 9-10 - Milestone 5, Analyse, Disabled-Styles):**
-- [x] Visuelle Validierung: 16/16 Buttons validiert ✅
-- [x] OsButton Features: `appearance` (outline, ghost), `xs` size, focus/active states
-- [x] Disabled-Styles: CSS-Variablen, hover/active-Override, Border-Fix
-- [x] Codebase-Analyse: 14 weitere migrierbare Buttons identifiziert (Scope: 16/35)
-
-**Zuvor abgeschlossen (Sessions 1-8 - Phase 3 Webapp-Integration):**
-- [x] vue-demi zur Webapp hinzugefügt (Vue 2.7 Kompatibilität)
-- [x] Webpack-Alias für vue-demi (nutzt Webapp's Vue 2.7 statt UI-Library's Vue 3)
-- [x] Webpack-Alias für @ocelot-social/ui (dist Pfade mit $ für exakten Match)
-- [x] OsButton mit isVue2 Render-Funktion (Vue 2: attrs-Objekt, Vue 3: flat props)
-- [x] CSS-Reihenfolge angepasst (UI-Library nach Styleguide für korrekte Spezifität)
-- [x] Manueller visueller Vergleich ✅
-- [x] **Jest-Integration für vue-demi** ✅
-  - Custom Mock (`test/__mocks__/@ocelot-social/ui.js`) statt direktem Import
-  - Problem: Jest's moduleNameMapper greift nicht für verschachtelte requires in CJS
-  - Problem: Jest lädt `vue.runtime.common.js` mit exports unter `default`
-  - Lösung: Module._load Patch für vue-demi + defineComponent von Vue.default
-  - Setup-File (`test/vueDemiSetup.js`) für Module._resolveFilename Patch
-  - **979 Tests bestehen ✅**
-- [x] Button-Variants an ds-button angepasst (font-semibold, rounded, box-shadow)
-- [x] UserTeaserPopover.vue migriert (verwendet `<os-button>`)
-- [x] **Docker Build für UI-Library** ✅
-  - ui-library Stage in Dockerfile + Dockerfile.maintenance
-  - COPY --from=ui-library ./app/ /packages/ui/
-- [x] **CI-Kompatibilität** ✅
-  - Relativer Pfad `file:../packages/ui` statt absolut `/packages/ui`
-  - Funktioniert lokal, in CI und in Docker
-- [x] **OsButton attrs/listeners Forwarding** ✅
-  - getCurrentInstance() für $listeners Zugriff in Vue 2
-  - inheritAttrs: false für manuelle Weiterleitung
-  - Jest Mock um alle Composition API Funktionen erweitert
-- [x] **16 Buttons migriert** (ohne icon/circle/loading) ✅
-  - GroupForm.vue, EmbedComponent.vue, DonationInfo.vue, CommentCard.vue
-  - MapStylesButtons.vue, GroupMember.vue, embeds.vue
-  - notifications.vue, privacy.vue, terms-and-conditions-confirm.vue, UserTeaserPopover.vue
-- [x] **Disabled-Styles korrigiert** ✅
-  - CSS-Variablen `--color-disabled` und `--color-disabled-contrast` hinzugefügt
-  - Filled-Buttons: Grauer Hintergrund statt opacity (wie buttonStates Mixin)
-  - Outline/Ghost: Graue Border/Text
-- [x] terms-and-conditions-confirm.vue: Read T&C Button → `appearance="outline" variant="primary"`
-- [x] **Disabled:active/hover Spezifität** ✅
-  - CSS-Regeln in index.css mit höherer Spezifität für disabled:hover und disabled:active
-  - Button zeigt sofort disabled-Farben, auch wenn während :active disabled wird
-- [x] notifications.vue: Check All + Uncheck All → `appearance="outline" variant="primary"`
-- [x] embeds.vue: Allow All → `appearance="outline" variant="primary"`
-- [x] **Disabled Border-Fix** ✅
-  - CSS-Regeln in index.css: `border-style: solid` und `border-width: 0.8px` bei disabled
-  - Verhindert Layout-Sprung wenn Button disabled wird
+**Zuvor abgeschlossen (Sessions 11-19 — Details im Arbeitsprotokoll §12):**
+- [x] Session 19: CodeRabbit Review Cleanup, ~30 Bugfixes + A11y-Verbesserungen
+- [x] Session 18: CodeRabbit Review data-test Selektoren, ~25 A11y aria-labels, OsButton Refactoring
+- [x] Session 16: Letzte ds-button Migration, Bugfixes, data-variant Attribut
+- [x] Session 15: Milestone 4c — 59 Buttons migriert, 0 base-button verbleibend
+- [x] Session 14: Loading Prop, Circle Prop, Spinner-Architektur, Code-Optimierung
+- [x] Session 13: Icon-Slot, Storybook Playground, 6 Icon-Buttons migriert
+- [x] Session 12: CSS-Linting, CI-Optimierung, Code-Review Fixes
+- [x] Session 11: Wasserfarben-Farbschema, Stories konsolidiert, Keyboard A11y
 
 **Nächste Schritte:**
-- [ ] Snapshots/Tests aktualisieren (nach `as`-Prop-Migration)
-- [ ] GroupButton + MapButton in HeaderMenu inlinen (keine eigene Komponente nötig)
-- [ ] `compat/` Verzeichnis in packages/ui anlegen (temporäre Migrations-Wrapper)
-- [ ] BaseIcon nach `compat/` verschieben (131 Nutzungen, Voraussetzung für weitere Migrationen)
-- [ ] BaseButton-Komponente ggf. entfernen
+- [ ] OsSpinner Komponente (vereint DsSpinner + LoadingSpinner)
+- [ ] OsCard Komponente (vereint DsCard + BaseCard)
+- [ ] Weitere Tier 1 Komponenten
+- [ ] BaseIcon → OsIcon Webapp-Migration (131 Nutzungen)
+- [ ] Snapshots/Tests aktualisieren
 
 **Manuelle Setup-Aufgaben (außerhalb Code):**
 - [ ] `NPM_TOKEN` als GitHub Secret einrichten (für npm publish in ui-release.yml)
@@ -635,7 +451,7 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ
 ### Phase 4: Komponenten-Migration (15 Komponenten + 2 Infrastruktur)
 
 **Tier 1: Kern-Komponenten**
-- [ ] OsIcon (vereint DsIcon + BaseIcon)
+- [x] OsIcon (vereint DsIcon + BaseIcon) ✅ System-Icons + vite-svg-icon Plugin
 - [ ] OsSpinner (vereint DsSpinner + LoadingSpinner)
 - [x] OsButton (vereint DsButton + BaseButton) ✅ Entwickelt in Phase 2
 - [ ] OsCard (vereint DsCard + BaseCard)
@@ -658,7 +474,7 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ
 - [ ] OsTag
 
 **Infrastruktur**
-- [ ] System-Icons einrichten
+- [x] System-Icons einrichten ✅ vite-svg-icon Plugin, 3 System-Icons, Ocelot-Icons Entry-Point
 - [ ] CI docs-check Workflow (JSDoc-Coverage, README-Aktualität)
 
 ### Phase 5: Finalisierung
@@ -858,17 +674,15 @@ Die Library verwendet eine **Hybrid-Architektur** für Icons:
 ┌─────────────────────────────────────────────────────────────┐
 │  @ocelot-social/ui (Library)                                │
 ├─────────────────────────────────────────────────────────────┤
-│  icons/system/           # ~10 System-Icons                 │
+│  src/components/OsIcon/icons/svgs/  # System-Icons          │
+│  ├── check.svg           # Bestätigung, Checkboxen          │
 │  ├── close.svg           # Modal, Chip, Dialoge             │
-│  ├── check.svg           # Modal confirm, Checkboxen        │
-│  ├── chevron-down.svg    # Select, Dropdown                 │
-│  ├── chevron-up.svg      # Select, Accordion                │
-│  ├── spinner.svg         # Loading-States                   │
-│  ├── bars.svg            # Hamburger-Menu                   │
-│  ├── copy.svg            # CopyField                        │
-│  ├── eye.svg             # Password-Toggle                  │
-│  ├── eye-slash.svg       # Password-Toggle, Anonym          │
-│  └── search.svg          # Search-Input                     │
+│  └── plus.svg            # Hinzufügen, Erstellen            │
+│                                                             │
+│  src/ocelot/icons/svgs/             # Ocelot-Icons          │
+│  └── angle-down.svg      # Dropdown-Pfeil                   │
+│                                                             │
+│  (Weitere System-Icons werden bei Bedarf ergänzt)           │
 └─────────────────────────────────────────────────────────────┘
                             ↓
 ┌─────────────────────────────────────────────────────────────┐
@@ -890,54 +704,61 @@ Die Library verwendet eine **Hybrid-Architektur** für Icons:
 3. **Feature-Icons gehören zur App** - Icons wie `user`, `bell`, `heart` sind Business-Logik
 4. **Branding-Flexibilität** - Verschiedene Ocelot-Instanzen können unterschiedliche Icon-Sets verwenden
 
-### System-Icons (in Library enthalten)
+### System-Icons (in Library enthalten) ✅
+
+| Icon | Verwendung | Status |
+|------|------------|--------|
+| `check` | Bestätigung, Checkboxen | ✅ implementiert |
+| `close` | Modal, Chip, Dialoge | ✅ implementiert |
+| `plus` | Hinzufügen, Erstellen | ✅ implementiert |
+
+**Geplant (bei Bedarf ergänzen):**
 
 | Icon | Verwendung in Komponenten |
 |------|---------------------------|
-| `close` | OsModal, OsChip, OsDialog, OsAlert |
-| `check` | OsModal (confirm), OsCheckbox |
 | `chevron-down` | OsSelect, OsDropdown, OsAccordion |
 | `chevron-up` | OsSelect, OsAccordion |
-| `spinner` | OsButton (loading), OsSpinner |
 | `bars` | OsPage (mobile menu) |
-| `copy` | OsCopyField |
-| `eye` | OsInput (password toggle) |
-| `eye-slash` | OsInput (password toggle), OsAvatar (anonym) |
 | `search` | OsInput (search variant) |
 
-### API-Design
+### API-Design (implementiert)
 
 ```typescript
-// OsIcon akzeptiert verschiedene Formate:
-
-// 1. System-Icon (String) - aus Library
+// OsIcon — System-Icon per Name
 <OsIcon name="close" />
+<OsIcon name="check" size="lg" />
 
-// 2. Vue-Komponente - für App-Icons
+// OsIcon — Custom Vue-Komponente (hat Vorrang vor name)
 <OsIcon :icon="UserIcon" />
 
-// 3. In Komponenten mit icon-Prop
-<OsButton icon="close" />           // System-Icon
-<OsButton :icon="CustomIcon" />     // Komponente
+// OsIcon — Semantic (mit aria-label)
+<OsIcon name="close" aria-label="Schließen" />
+
+// OsButton — Icon über #icon Slot (icon-system-agnostisch)
+<OsButton variant="primary">
+  <template #icon><OsIcon name="check" /></template>
+  Speichern
+</OsButton>
 ```
 
-### Webapp-Integration
+### SVG-Loading (vite-svg-icon Plugin)
 
 ```typescript
-// webapp/plugins/icons.ts
-import { provideIcons } from '@ocelot-social/ui'
-import * as appIcons from '~/assets/icons'
+// SVGs werden via ?icon Query als Vue-Komponenten geladen
+import CheckIcon from './check.svg?icon'
 
-export default defineNuxtPlugin((nuxtApp) => {
-  // App-Icons global registrieren
-  provideIcons(appIcons)
-})
+// Plugin extrahiert viewBox + <path> und transformiert zu:
+// h('svg', { viewBox, ... }, [h('path', { d })])
 ```
 
-```vue
-<!-- Dann in der Webapp nutzbar -->
-<OsButton :icon="icons.user" />
-<OsIcon :icon="icons.bell" />
+### Ocelot-Icons (separates Entry-Point)
+
+```typescript
+// Dynamisches Loading via import.meta.glob
+import { ocelotIcons } from '@ocelot-social/ui/ocelot'
+
+// Filename → PascalCase: angle-down.svg → IconAngleDown
+// Returns Record<string, () => VNode>
 ```
 
 ### Aktuelle Icon-Statistik
@@ -946,7 +767,8 @@ export default defineNuxtPlugin((nuxtApp) => {
 |--------|--------|--------|
 | Styleguide (_all) | 616 | Nicht übernehmen (FontAwesome 4 komplett) |
 | Webapp (svgs) | 238 | Feature-Icons, bleiben in Webapp |
-| **Library (system)** | **~10** | Nur essenzielle System-Icons |
+| **Library (system)** | **3** | ✅ check, close, plus |
+| **Ocelot-Icons** | **1** | ✅ angle-down (separates Entry-Point) |
 
 ---
 
@@ -1696,6 +1518,10 @@ Bei der Migration werden:
 | 2026-02-13 | **CSS-Selektoren** | LoginForm: `.login-form button` → `.login-form button[type='submit']`; pages/index: redundante Klasse auf BaseIcon entfernt |
 | 2026-02-13 | **JoinLeaveButton** | `.native` von `@mouseenter`/`@mouseleave` entfernt (Vue 3 Kompatibilität) |
 | 2026-02-13 | **MySomethingList** | `:title` + `:aria-label` auf Edit/Delete-Buttons (Tooltip beibehalten neben Accessibility) |
+| 2026-02-13 | **OsButton Klasse** | `os-button` CSS-Klasse auf Button-Element für Branding-Kompatibilität (#9211) |
+| 2026-02-14 | **ESLint Config Update** | eslint-config-it4c v0.11.2: Flat Config, path alias `#src`, CSS-Linting, security/detect-non-literal-fs-filename, n/no-sync, n/shebang (#9233) |
+| 2026-02-14 | **check-completeness** | Parallelisiertes File-Reading, breitere Regex für Keyboard-Tests, Playground-Tests ignoriert |
+| 2026-02-14 | **Release v0.0.2** | @ocelot-social/ui v0.0.2 veröffentlicht |
 | 2026-02-14 | **`as` Prop** | Polymorphe OsButton-Komponente: `as` Prop für dynamischen Tag/Komponente (`button`, `a`, `nuxt-link`, `router-link`); moderner Standard (Headless UI, Radix Vue) |
 | 2026-02-14 | **Naming: tag → as** | `tag` → `as` umbenannt nach Recherche moderner UI-Libraries (Headless UI, Radix Vue, Chakra UI, PrimeVue nutzen `as`) |
 | 2026-02-14 | **Disabled nur für button** | `disabled`/`type`/`loading` nur bei `as="button"` (Links haben kein natives `disabled`); `aria-disabled`/`tabindex` Logik entfernt |
@@ -1705,6 +1531,18 @@ Bei der Migration werden:
 | 2026-02-14 | **NotificationMenu konsolidiert** | 2 separate Buttons (kein Badge / mit Badge) zu einem zusammengeführt — counter-icon zeigt bei `count=0` kein Badge |
 | 2026-02-14 | **CSS-Selektor Fix** | pages/index.vue: `button.post-add-button-top/bottom` → `.post-add-button-top/bottom` (nuxt-link rendert `<a>`, nicht `<button>`) |
 | 2026-02-14 | **Profil-Spacing** | profile/_id/_slug.vue: `v-if` auf ds-grid-item (kein leerer Abstand), symmetrisches Padding `$space-x-small` |
+| 2026-02-15 | **OsIcon Komponente** | Neue Komponente: `name` (System-Icon), `icon` (Custom Component), `size` (xs-2xl); Vue 2/3 via vue-demi h() |
+| 2026-02-15 | **vite-svg-icon Plugin** | Custom Vite Plugin: extrahiert viewBox + `<path>` aus SVG, transformiert zu Vue h()-Aufruf via `?icon` Query |
+| 2026-02-15 | **System-Icons** | 3 SVG-Icons in Library: check, close, plus (viewBox 0 0 32 32, stroke-basiert); SYSTEM_ICONS Registry + SystemIconName Type |
+| 2026-02-15 | **Icon-Größen** | CVA-Varianten: xs(0.75em), sm(0.875em), md(1.2em default), lg(1.5em), xl(2em), 2xl(2.5em) — em-basiert für Kontext-Skalierung |
+| 2026-02-15 | **Icon A11y** | Decorative: `aria-hidden="true"` (default); Semantic: `role="img"` + `aria-label` wenn Label-Prop vorhanden |
+| 2026-02-15 | **OsIcon in OsButton** | OsButton nutzt OsIcon statt inline SVG-Elemente für Icon-Slot-Rendering |
+| 2026-02-15 | **Ocelot-Icons** | Separates Entry-Point (`ocelot.mjs`): dynamisches Icon-Loading via `import.meta.glob('**/*.svg', { query: '?icon' })` |
+| 2026-02-15 | **webapp → ocelot** | `src/webapp/` → `src/ocelot/` umbenannt; Stories, Tests, Exports angepasst; konsistentes Naming |
+| 2026-02-15 | **OsIcon Tests** | 211 Zeilen Unit-Tests (Rendering, Sizes, A11y, CSS, System-Icons); Visual Tests mit checkA11y(); Keyboard A11y; 100% Coverage |
+| 2026-02-15 | **OsButton Stories** | Bereinigt: Inline-SVG-Komponenten durch OsIcon ersetzt; WithAriaLabel-Story entfernt; InheritColor-Story vereinfacht |
+| 2026-02-15 | **check-completeness** | Erweitert für ocelot/ Verzeichnis; unterstützt OsIcon-Patterns |
+| 2026-02-15 | **svg-icon.d.ts** | TypeScript-Deklaration für `?icon` Import-Query (Component-Typ) |
 
 ---
 
diff --git a/packages/ui/eslint.config.ts b/packages/ui/eslint.config.ts
index 1d63cd448..789fb4dcb 100644
--- a/packages/ui/eslint.config.ts
+++ b/packages/ui/eslint.config.ts
@@ -55,6 +55,13 @@ export default [
       ...vuejsAccessibilityPlugin.configs.recommended.rules,
     },
   },
+  {
+    // Allow .svg?icon imports (custom Vite plugin)
+    files: ['src/**/icons/index.ts'],
+    rules: {
+      'n/file-extension-in-import': 'off',
+    },
+  },
   ...css,
   {
     // Extend CSS config with Tailwind v4 syntax support
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 73f898e6a..452861fa6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,6 +18,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./ocelot": {
+      "import": {
+        "types": "./dist/ocelot.d.ts",
+        "default": "./dist/ocelot.mjs"
+      },
+      "require": {
+        "types": "./dist/ocelot.d.cts",
+        "default": "./dist/ocelot.cjs"
+      }
+    },
     "./style.css": "./dist/style.css",
     "./tailwind.preset": {
       "style": "./dist/tailwind.preset.mjs",
@@ -134,13 +144,18 @@
   "size-limit": [
     {
       "path": "dist/index.mjs",
-      "limit": "15 kB",
+      "limit": "16 kB",
       "brotli": true
     },
     {
       "path": "dist/tailwind.preset.mjs",
       "limit": "2 kB"
     },
+    {
+      "path": "dist/ocelot.mjs",
+      "limit": "5 kB",
+      "brotli": true
+    },
     {
       "path": "dist/style.css",
       "limit": "10 kB"
diff --git a/packages/ui/playwright.config.ts b/packages/ui/playwright.config.ts
index 3adfaa5ca..7cc6046ac 100644
--- a/packages/ui/playwright.config.ts
+++ b/packages/ui/playwright.config.ts
@@ -8,7 +8,7 @@ import { defineConfig, devices } from '@playwright/test'
  * Baseline images are stored in e2e/__screenshots__ and committed to git.
  */
 export default defineConfig({
-  testDir: './src/components',
+  testDir: './src',
   testMatch: '**/*.visual.spec.ts',
 
   /* Run tests in parallel */
diff --git a/packages/ui/scripts/check-completeness.ts b/packages/ui/scripts/check-completeness.ts
index d18c16e75..4f5e7bb8f 100644
--- a/packages/ui/scripts/check-completeness.ts
+++ b/packages/ui/scripts/check-completeness.ts
@@ -42,11 +42,58 @@ interface CheckResult {
   warnings: string[]
 }
 
+function checkVisualTests(
+  visualTestContent: string | null,
+  visualTestPath: string,
+  errors: string[],
+): void {
+  if (visualTestContent === null) {
+    errors.push(`Missing visual test file: ${visualTestPath}`)
+  } else if (!visualTestContent.includes('checkA11y(')) {
+    errors.push(`Missing checkA11y() calls in visual tests: ${visualTestPath}`)
+  }
+}
+
+function checkKeyboardA11y(
+  unitTestContent: string | null,
+  unitTestPath: string,
+  errors: string[],
+): void {
+  if (unitTestContent !== null) {
+    if (!/describe\(\s*['"]keyboard accessibility['"]/.test(unitTestContent)) {
+      errors.push(`Missing keyboard accessibility tests in: ${unitTestPath}`)
+    }
+  } else {
+    errors.push(`Missing unit test file: ${unitTestPath}`)
+  }
+}
+
+function checkStoryCoverage(
+  storyContent: string,
+  visualTestContent: string,
+  warnings: string[],
+): void {
+  const storyExports = storyContent.matchAll(/export\s+const\s+(\w+):\s*Story/g)
+
+  for (const match of storyExports) {
+    const storyName = match[1]
+    if (storyName === 'Playground') continue
+    const kebabName = toKebabCase(storyName)
+
+    if (!visualTestContent.includes(`--${kebabName}`)) {
+      warnings.push(`Story "${storyName}" missing visual test (--${kebabName})`)
+    }
+  }
+}
+
 const results: CheckResult[] = []
 let hasErrors = false
 
 // Find all Vue components (excluding index files)
-const components = await glob('src/components/**/Os*.vue')
+const components = [
+  ...(await glob('src/components/**/Os*.vue')),
+  ...(await glob('src/ocelot/components/**/*.vue')),
+]
 
 for (const componentPath of components) {
   const componentName = basename(componentPath, '.vue')
@@ -56,7 +103,7 @@ for (const componentPath of components) {
   const unitTestPath = join(componentDir, `${componentName}.spec.ts`)
   const variantsPath = join(
     componentDir,
-    `${componentName.toLowerCase().replace('os', '')}.variants.ts`,
+    `${componentName.replace(/^Os/, '').toLowerCase()}.variants.ts`,
   )
 
   const result: CheckResult = {
@@ -78,38 +125,15 @@ for (const componentPath of components) {
     result.errors.push(`Missing story file: ${storyPath}`)
   }
 
-  // Check 2: Visual regression test file exists
-  if (visualTestContent === null) {
-    result.errors.push(`Missing visual test file: ${visualTestPath}`)
-  }
-
-  // Check 3: Visual tests include accessibility checks
-  if (visualTestContent !== null && !visualTestContent.includes('checkA11y(')) {
-    result.errors.push(`Missing checkA11y() calls in visual tests: ${visualTestPath}`)
-  }
+  // Check 2 & 3: Visual regression tests with a11y checks
+  checkVisualTests(visualTestContent, visualTestPath, result.errors)
 
   // Check 4: Keyboard accessibility tests exist
-  if (unitTestContent !== null) {
-    if (!/describe\(\s*['"]keyboard accessibility['"]/.test(unitTestContent)) {
-      result.errors.push(`Missing keyboard accessibility tests in: ${unitTestPath}`)
-    }
-  } else {
-    result.errors.push(`Missing unit test file: ${unitTestPath}`)
-  }
+  checkKeyboardA11y(unitTestContent, unitTestPath, result.errors)
 
   // Check 5 & 6: Story and visual test coverage
   if (storyContent !== null && visualTestContent !== null) {
-    const storyExports = storyContent.matchAll(/export\s+const\s+(\w+):\s*Story/g)
-
-    for (const match of storyExports) {
-      const storyName = match[1]
-      if (storyName === 'Playground') continue
-      const kebabName = toKebabCase(storyName)
-
-      if (!visualTestContent.includes(`--${kebabName}`)) {
-        result.warnings.push(`Story "${storyName}" missing visual test (--${kebabName})`)
-      }
-    }
+    checkStoryCoverage(storyContent, visualTestContent, result.warnings)
   }
 
   // Check 5: Variant values are demonstrated in stories
@@ -151,6 +175,47 @@ for (const componentPath of components) {
   }
 }
 
+// --- Ocelot stories (no .vue files, story-driven checks) ---
+const ocelotStories = await glob('src/ocelot/**/*.stories.ts')
+
+for (const storyPath of ocelotStories) {
+  const storyName = basename(storyPath, '.stories.ts')
+  const storyDir = dirname(storyPath)
+  const visualTestPath = join(storyDir, `${storyName}.visual.spec.ts`)
+  const unitTestPath = join(storyDir, 'index.spec.ts')
+
+  const result: CheckResult = {
+    component: storyName,
+    errors: [],
+    warnings: [],
+  }
+
+  const [storyContent, visualTestContent, unitTestContent] = await Promise.all([
+    tryReadFile(storyPath),
+    tryReadFile(visualTestPath),
+    tryReadFile(unitTestPath),
+  ])
+
+  // Check: Visual regression tests with a11y checks
+  checkVisualTests(visualTestContent, visualTestPath, result.errors)
+
+  // Check: Keyboard accessibility tests exist
+  checkKeyboardA11y(unitTestContent, unitTestPath, result.errors)
+
+  // Check: Story-to-visual-test coverage
+  if (storyContent !== null && visualTestContent !== null) {
+    checkStoryCoverage(storyContent, visualTestContent, result.warnings)
+  }
+
+  if (result.errors.length > 0 || result.warnings.length > 0) {
+    results.push(result)
+  }
+
+  if (result.errors.length > 0) {
+    hasErrors = true
+  }
+}
+
 // Output results
 if (results.length === 0) {
   console.log('✓ All completeness checks passed!')
diff --git a/packages/ui/src/components/OsButton/OsButton.stories.ts b/packages/ui/src/components/OsButton/OsButton.stories.ts
index a7518f3c9..ba0367c00 100644
--- a/packages/ui/src/components/OsButton/OsButton.stories.ts
+++ b/packages/ui/src/components/OsButton/OsButton.stories.ts
@@ -1,35 +1,11 @@
-import { computed, h } from 'vue'
+import { computed } from 'vue'
+
+import { IconCheck, IconClose, IconPlus } from '#src/components/OsIcon'
 
 import OsButton from './OsButton.vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-/**
- * Inline SVG icons for demo purposes (from Heroicons).
- * In real usage, the webapp passes its own BaseIcon component.
- */
-const CheckIcon = () =>
-  h('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 20 20', fill: 'currentColor' }, [
-    h('path', {
-      'fill-rule': 'evenodd',
-      d: 'M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z',
-      'clip-rule': 'evenodd',
-    }),
-  ])
-
-const CloseIcon = () =>
-  h('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 20 20', fill: 'currentColor' }, [
-    h('path', {
-      d: 'M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z',
-    }),
-  ])
-
-const PlusIcon = () =>
-  h('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 20 20', fill: 'currentColor' }, [
-    h('path', {
-      d: 'M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z',
-    }),
-  ])
+import type { Component } from 'vue'
 
 const meta: Meta<typeof OsButton> = {
   title: 'Components/OsButton',
@@ -54,11 +30,11 @@ interface PlaygroundArgs {
   label: string
 }
 
-const iconMap: Record<string, (() => ReturnType<typeof h>) | null> = {
+const iconMap: Record<string, Component | null> = {
   none: null,
-  check: CheckIcon,
-  close: CloseIcon,
-  plus: PlusIcon,
+  check: IconCheck,
+  close: IconClose,
+  plus: IconPlus,
 }
 
 export const Playground: StoryObj<PlaygroundArgs> = {
@@ -371,27 +347,27 @@ export const FullWidth: Story = {
 
 export const Icon: Story = {
   render: () => ({
-    components: { OsButton, CheckIcon, PlusIcon, CloseIcon },
+    components: { OsButton, IconCheck, IconPlus, IconClose },
     template: `
       <div class="flex flex-wrap gap-2">
         <OsButton variant="primary">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
           Save
         </OsButton>
         <OsButton variant="success">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
           Confirm
         </OsButton>
         <OsButton variant="default">
-          <template #icon><PlusIcon /></template>
+          <template #icon><IconPlus /></template>
           Add
         </OsButton>
         <OsButton variant="danger">
-          <template #icon><CloseIcon /></template>
+          <template #icon><IconClose /></template>
           Delete
         </OsButton>
         <OsButton variant="info">
-          <template #icon><PlusIcon /></template>
+          <template #icon><IconPlus /></template>
           Create
         </OsButton>
       </div>
@@ -401,23 +377,23 @@ export const Icon: Story = {
 
 export const IconOnly: Story = {
   render: () => ({
-    components: { OsButton, CloseIcon, PlusIcon, CheckIcon },
+    components: { OsButton, IconClose, IconPlus, IconCheck },
     template: `
       <div class="flex flex-wrap gap-2">
         <OsButton variant="danger" aria-label="Close">
-          <template #icon><CloseIcon /></template>
+          <template #icon><IconClose /></template>
         </OsButton>
         <OsButton variant="primary" aria-label="Add">
-          <template #icon><PlusIcon /></template>
+          <template #icon><IconPlus /></template>
         </OsButton>
         <OsButton variant="success" aria-label="Confirm">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
         </OsButton>
         <OsButton variant="default" aria-label="Close" appearance="outline">
-          <template #icon><CloseIcon /></template>
+          <template #icon><IconClose /></template>
         </OsButton>
         <OsButton variant="primary" aria-label="Add" appearance="ghost">
-          <template #icon><PlusIcon /></template>
+          <template #icon><IconPlus /></template>
         </OsButton>
       </div>
     `,
@@ -426,23 +402,23 @@ export const IconOnly: Story = {
 
 export const IconSizes: Story = {
   render: () => ({
-    components: { OsButton, CheckIcon },
+    components: { OsButton, IconCheck },
     template: `
       <div class="flex flex-wrap gap-2 items-center">
         <OsButton size="sm" variant="primary">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
           Small
         </OsButton>
         <OsButton size="md" variant="primary">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
           Medium
         </OsButton>
         <OsButton size="lg" variant="primary">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
           Large
         </OsButton>
         <OsButton size="xl" variant="primary">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
           Extra Large
         </OsButton>
       </div>
@@ -452,22 +428,22 @@ export const IconSizes: Story = {
 
 export const IconAppearances: Story = {
   render: () => ({
-    components: { OsButton, CheckIcon },
+    components: { OsButton, IconCheck },
     template: `
       <div class="flex flex-col gap-4">
         <div>
           <h3 class="text-sm font-bold mb-2">Filled</h3>
           <div class="flex flex-wrap gap-2">
             <OsButton appearance="filled" variant="primary">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Primary
             </OsButton>
             <OsButton appearance="filled" variant="danger">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Danger
             </OsButton>
             <OsButton appearance="filled" variant="success">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Success
             </OsButton>
           </div>
@@ -476,15 +452,15 @@ export const IconAppearances: Story = {
           <h3 class="text-sm font-bold mb-2">Outline</h3>
           <div class="flex flex-wrap gap-2">
             <OsButton appearance="outline" variant="primary">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Primary
             </OsButton>
             <OsButton appearance="outline" variant="danger">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Danger
             </OsButton>
             <OsButton appearance="outline" variant="success">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Success
             </OsButton>
           </div>
@@ -493,15 +469,15 @@ export const IconAppearances: Story = {
           <h3 class="text-sm font-bold mb-2">Ghost</h3>
           <div class="flex flex-wrap gap-2">
             <OsButton appearance="ghost" variant="primary">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Primary
             </OsButton>
             <OsButton appearance="ghost" variant="danger">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Danger
             </OsButton>
             <OsButton appearance="ghost" variant="success">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Success
             </OsButton>
           </div>
@@ -513,29 +489,29 @@ export const IconAppearances: Story = {
 
 export const Circle: Story = {
   render: () => ({
-    components: { OsButton, PlusIcon, CloseIcon, CheckIcon },
+    components: { OsButton, IconPlus, IconClose, IconCheck },
     template: `
       <div class="flex flex-wrap gap-2 items-center">
         <OsButton circle variant="default" aria-label="Add">
-          <template #icon><PlusIcon /></template>
+          <template #icon><IconPlus /></template>
         </OsButton>
         <OsButton circle variant="primary" aria-label="Add">
-          <template #icon><PlusIcon /></template>
+          <template #icon><IconPlus /></template>
         </OsButton>
         <OsButton circle variant="secondary" aria-label="Confirm">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
         </OsButton>
         <OsButton circle variant="danger" aria-label="Close">
-          <template #icon><CloseIcon /></template>
+          <template #icon><IconClose /></template>
         </OsButton>
         <OsButton circle variant="warning" aria-label="Close">
-          <template #icon><CloseIcon /></template>
+          <template #icon><IconClose /></template>
         </OsButton>
         <OsButton circle variant="success" aria-label="Confirm">
-          <template #icon><CheckIcon /></template>
+          <template #icon><IconCheck /></template>
         </OsButton>
         <OsButton circle variant="info" aria-label="Add">
-          <template #icon><PlusIcon /></template>
+          <template #icon><IconPlus /></template>
         </OsButton>
       </div>
     `,
@@ -544,20 +520,20 @@ export const Circle: Story = {
 
 export const CircleSizes: Story = {
   render: () => ({
-    components: { OsButton, PlusIcon },
+    components: { OsButton, IconPlus },
     template: `
       <div class="flex flex-col gap-4">
         <div>
           <h3 class="text-sm font-bold mb-2">Small (26px)</h3>
           <div class="flex flex-wrap gap-2 items-center">
             <OsButton circle size="sm" variant="primary" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="sm" variant="danger" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="sm" variant="default" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -565,13 +541,13 @@ export const CircleSizes: Story = {
           <h3 class="text-sm font-bold mb-2">Medium (36px)</h3>
           <div class="flex flex-wrap gap-2 items-center">
             <OsButton circle size="md" variant="primary" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="md" variant="danger" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="md" variant="default" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -579,13 +555,13 @@ export const CircleSizes: Story = {
           <h3 class="text-sm font-bold mb-2">Large (48px)</h3>
           <div class="flex flex-wrap gap-2 items-center">
             <OsButton circle size="lg" variant="primary" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="lg" variant="danger" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="lg" variant="default" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -593,13 +569,13 @@ export const CircleSizes: Story = {
           <h3 class="text-sm font-bold mb-2">Extra Large (56px)</h3>
           <div class="flex flex-wrap gap-2 items-center">
             <OsButton circle size="xl" variant="primary" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="xl" variant="danger" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle size="xl" variant="default" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -610,23 +586,23 @@ export const CircleSizes: Story = {
 
 export const CircleAppearances: Story = {
   render: () => ({
-    components: { OsButton, PlusIcon, CloseIcon, CheckIcon },
+    components: { OsButton, IconPlus, IconClose, IconCheck },
     template: `
       <div class="flex flex-col gap-4">
         <div>
           <h3 class="text-sm font-bold mb-2">Filled</h3>
           <div class="flex flex-wrap gap-2 items-center">
             <OsButton circle appearance="filled" variant="primary" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle appearance="filled" variant="danger" aria-label="Close">
-              <template #icon><CloseIcon /></template>
+              <template #icon><IconClose /></template>
             </OsButton>
             <OsButton circle appearance="filled" variant="success" aria-label="Confirm">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
             </OsButton>
             <OsButton circle appearance="filled" variant="default" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -634,16 +610,16 @@ export const CircleAppearances: Story = {
           <h3 class="text-sm font-bold mb-2">Outline</h3>
           <div class="flex flex-wrap gap-2 items-center">
             <OsButton circle appearance="outline" variant="primary" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle appearance="outline" variant="danger" aria-label="Close">
-              <template #icon><CloseIcon /></template>
+              <template #icon><IconClose /></template>
             </OsButton>
             <OsButton circle appearance="outline" variant="success" aria-label="Confirm">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
             </OsButton>
             <OsButton circle appearance="outline" variant="default" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -651,16 +627,16 @@ export const CircleAppearances: Story = {
           <h3 class="text-sm font-bold mb-2">Ghost</h3>
           <div class="flex flex-wrap gap-2 items-center">
             <OsButton circle appearance="ghost" variant="primary" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
             <OsButton circle appearance="ghost" variant="danger" aria-label="Close">
-              <template #icon><CloseIcon /></template>
+              <template #icon><IconClose /></template>
             </OsButton>
             <OsButton circle appearance="ghost" variant="success" aria-label="Confirm">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
             </OsButton>
             <OsButton circle appearance="ghost" variant="default" aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -671,7 +647,7 @@ export const CircleAppearances: Story = {
 
 export const Polymorphic: Story = {
   render: () => ({
-    components: { OsButton, CheckIcon, PlusIcon },
+    components: { OsButton, IconCheck, IconPlus },
     template: `
       <div class="flex flex-col gap-4">
         <div>
@@ -687,11 +663,11 @@ export const Polymorphic: Story = {
           <h3 class="text-sm font-bold mb-2">as="a" with icon</h3>
           <div class="flex flex-wrap gap-2">
             <OsButton as="a" href="#" variant="primary">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Save
             </OsButton>
             <OsButton as="a" href="#" variant="success" circle aria-label="Add">
-              <template #icon><PlusIcon /></template>
+              <template #icon><IconPlus /></template>
             </OsButton>
           </div>
         </div>
@@ -709,7 +685,7 @@ export const Polymorphic: Story = {
 
 export const Loading: Story = {
   render: () => ({
-    components: { OsButton, CheckIcon },
+    components: { OsButton, IconCheck },
     template: `
       <div class="flex flex-col gap-4">
         <div>
@@ -734,12 +710,12 @@ export const Loading: Story = {
           <h3 class="text-sm font-bold mb-2">With Icon</h3>
           <div class="flex flex-wrap gap-2">
             <OsButton loading variant="primary">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
               Save
             </OsButton>
             <OsButton loading variant="danger">Delete</OsButton>
             <OsButton loading circle variant="primary" aria-label="Loading">
-              <template #icon><CheckIcon /></template>
+              <template #icon><IconCheck /></template>
             </OsButton>
           </div>
         </div>
diff --git a/packages/ui/src/components/OsIcon/OsIcon.spec.ts b/packages/ui/src/components/OsIcon/OsIcon.spec.ts
new file mode 100644
index 000000000..d6f71787a
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/OsIcon.spec.ts
@@ -0,0 +1,225 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { defineComponent, h, markRaw } from 'vue'
+
+import { ICON_SIZES } from './icon.variants'
+import { IconCheck, IconClose, IconPlus, SYSTEM_ICONS } from './icons'
+import OsIcon from './OsIcon.vue'
+
+import type { Size } from '#src/types'
+
+describe('osIcon', () => {
+  describe('rendering', () => {
+    it('renders a system icon by name', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.find('.os-icon').exists()).toBe(true)
+      expect(wrapper.find('svg').exists()).toBe(true)
+    })
+
+    it('renders a custom render function via icon prop', () => {
+      const CustomIcon = () => h('svg', { 'data-testid': 'custom' })
+      const wrapper = mount(OsIcon, {
+        props: { icon: CustomIcon },
+      })
+
+      expect(wrapper.find('.os-icon').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="custom"]').exists()).toBe(true)
+    })
+
+    it('renders a custom component object via icon prop', () => {
+      const CustomIcon = markRaw(
+        defineComponent({
+          render: () => h('svg', { 'data-testid': 'component' }),
+        }),
+      )
+      const wrapper = mount(OsIcon, {
+        props: { icon: CustomIcon },
+      })
+
+      expect(wrapper.find('.os-icon').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="component"]').exists()).toBe(true)
+    })
+
+    it('renders nothing when neither name nor icon is provided', () => {
+      const wrapper = mount(OsIcon)
+
+      expect(wrapper.find('.os-icon').exists()).toBe(false)
+      expect(wrapper.html()).toBe('')
+    })
+
+    it('icon prop takes precedence over name', () => {
+      const CustomIcon = () => h('svg', { 'data-testid': 'custom' })
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close', icon: CustomIcon },
+      })
+
+      expect(wrapper.find('[data-testid="custom"]').exists()).toBe(true)
+    })
+
+    it('renders nothing for unknown icon name', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'nonexistent' },
+      })
+
+      expect(wrapper.find('.os-icon').exists()).toBe(false)
+    })
+  })
+
+  describe('size prop', () => {
+    const sizes = Object.entries(ICON_SIZES)
+
+    it.each(sizes)('applies %s size class', (size, expectedClass) => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close', size: size as Size },
+      })
+
+      expect(wrapper.classes()).toContain(expectedClass)
+    })
+
+    it('defaults to md size', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.classes()).toContain('h-[1.2em]')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has aria-hidden="true" by default (decorative)', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.attributes('aria-hidden')).toBe('true')
+    })
+
+    it('does not have role="img" by default', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.attributes('role')).toBeUndefined()
+    })
+
+    it('has role="img" when aria-label is provided', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+        attrs: { 'aria-label': 'Close' },
+      })
+
+      expect(wrapper.attributes('role')).toBe('img')
+      expect(wrapper.attributes('aria-label')).toBe('Close')
+    })
+
+    it('does not have aria-hidden when aria-label is provided', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+        attrs: { 'aria-label': 'Close' },
+      })
+
+      expect(wrapper.attributes('aria-hidden')).toBeUndefined()
+    })
+  })
+
+  describe('css', () => {
+    it('has fill-current class for color inheritance', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.classes()).toContain('[&>svg]:fill-current')
+    })
+
+    it('has inline-flex display', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.classes()).toContain('inline-flex')
+    })
+
+    it('merges custom classes', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+        attrs: { class: 'text-red-500' },
+      })
+
+      expect(wrapper.classes()).toContain('text-red-500')
+      expect(wrapper.classes()).toContain('os-icon')
+    })
+
+    it('renders as span element', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect((wrapper.element as HTMLElement).tagName).toBe('SPAN')
+    })
+
+    it('has shrink-0 class', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.classes()).toContain('shrink-0')
+    })
+  })
+
+  describe('system icons', () => {
+    const iconEntries = Object.entries(SYSTEM_ICONS)
+
+    it('has 3 system icons registered', () => {
+      expect(iconEntries).toHaveLength(3)
+    })
+
+    it.each(iconEntries)('renders "%s" without errors', (name) => {
+      const wrapper = mount(OsIcon, {
+        props: { name },
+      })
+
+      expect(wrapper.find('svg').exists()).toBe(true)
+      expect(wrapper.find('path').exists()).toBe(true)
+    })
+
+    it('exports all icon components individually and renders them', () => {
+      const icons = [IconCheck, IconClose, IconPlus]
+
+      for (const icon of icons) {
+        const wrapper = mount(OsIcon, { props: { icon } })
+
+        expect(wrapper.find('svg').exists()).toBe(true)
+      }
+    })
+
+    it('each icon SVG has viewBox attribute', () => {
+      for (const name of Object.keys(SYSTEM_ICONS)) {
+        const wrapper = mount(OsIcon, { props: { name } })
+        const svg = wrapper.find('svg')
+
+        expect(svg.attributes('viewBox'), `${name} should have viewBox`).toBe('0 0 32 32')
+      }
+    })
+  })
+
+  describe('keyboard accessibility', () => {
+    it('is not focusable (decorative element)', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect(wrapper.attributes('tabindex')).toBeUndefined()
+    })
+
+    it('renders as span element (not interactive)', () => {
+      const wrapper = mount(OsIcon, {
+        props: { name: 'close' },
+      })
+
+      expect((wrapper.element as HTMLElement).tagName).toBe('SPAN')
+    })
+  })
+})
diff --git a/packages/ui/src/components/OsIcon/OsIcon.stories.ts b/packages/ui/src/components/OsIcon/OsIcon.stories.ts
new file mode 100644
index 000000000..30e3a0051
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/OsIcon.stories.ts
@@ -0,0 +1,143 @@
+import { computed, h } from 'vue'
+
+import { SYSTEM_ICONS } from './icons'
+import OsIcon from './OsIcon.vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta: Meta<typeof OsIcon> = {
+  title: 'Components/OsIcon',
+  component: OsIcon,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof OsIcon>
+
+const iconNames = Object.keys(SYSTEM_ICONS)
+
+const HeartIcon = () =>
+  h('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 20 20', fill: 'currentColor' }, [
+    h('path', {
+      d: 'M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.837-2.194C3.614 12.186 2 10.114 2 7.5A4.5 4.5 0 016.5 3c1.279 0 2.374.612 3.149 1.469C10.376 3.612 11.471 3 12.75 3A4.5 4.5 0 0117.25 7.5c0 2.614-1.614 4.686-3.63 6.526a22.045 22.045 0 01-2.837 2.194 20.759 20.759 0 01-1.162.682l-.019.01-.005.003h-.002L9.653 16.915z',
+    }),
+  ])
+
+interface PlaygroundArgs {
+  name: string
+  size: string
+  ariaLabel: string
+}
+
+export const Playground: StoryObj<PlaygroundArgs> = {
+  argTypes: {
+    name: {
+      control: 'select',
+      options: iconNames,
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+    },
+    ariaLabel: {
+      control: 'text',
+    },
+  },
+  args: {
+    name: 'close',
+    size: 'md',
+    ariaLabel: '',
+  },
+  render: (args) => ({
+    components: { OsIcon },
+    setup() {
+      const iconProps = computed(() => ({
+        name: args.name,
+        size: args.size,
+      }))
+      const ariaLabel = computed(() => args.ariaLabel || undefined)
+      return { iconProps, ariaLabel }
+    },
+    template: `<OsIcon v-bind="iconProps" :aria-label="ariaLabel" />`,
+  }),
+}
+
+export const AllSystemIcons: Story = {
+  render: () => ({
+    components: { OsIcon },
+    setup() {
+      return { iconNames }
+    },
+    template: `
+      <div class="grid grid-cols-5 gap-4">
+        <div v-for="name in iconNames" :key="name" class="flex flex-col items-center gap-2 p-3 rounded border border-gray-200">
+          <OsIcon :name="name" size="xl" />
+          <span class="text-xs text-gray-600">{{ name }}</span>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { OsIcon },
+    template: `
+      <div data-testid="all-sizes" class="flex items-end gap-4">
+        <div class="flex flex-col items-center gap-1">
+          <OsIcon name="check" size="xs" />
+          <span class="text-xs text-gray-500">xs</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <OsIcon name="check" size="sm" />
+          <span class="text-xs text-gray-500">sm</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <OsIcon name="check" size="md" />
+          <span class="text-xs text-gray-500">md</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <OsIcon name="check" size="lg" />
+          <span class="text-xs text-gray-500">lg</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <OsIcon name="check" size="xl" />
+          <span class="text-xs text-gray-500">xl</span>
+        </div>
+        <div class="flex flex-col items-center gap-1">
+          <OsIcon name="check" size="2xl" />
+          <span class="text-xs text-gray-500">2xl</span>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const CustomComponent: Story = {
+  render: () => ({
+    components: { OsIcon },
+    setup() {
+      return { HeartIcon }
+    },
+    template: `
+      <div data-testid="custom-component" class="flex items-center gap-4">
+        <OsIcon :icon="HeartIcon" size="md" />
+        <OsIcon :icon="HeartIcon" size="lg" />
+        <OsIcon :icon="HeartIcon" size="xl" />
+      </div>
+    `,
+  }),
+}
+
+export const InheritColor: Story = {
+  render: () => ({
+    components: { OsIcon },
+    template: `
+      <div data-testid="inherit-color" class="flex items-center gap-4 text-lg">
+        <span class="text-red-500"><OsIcon name="close" /></span>
+        <span class="text-green-500"><OsIcon name="check" /></span>
+        <span class="text-blue-500"><OsIcon name="plus" /></span>
+      </div>
+    `,
+  }),
+}
diff --git a/packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts b/packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts
new file mode 100644
index 000000000..54727b8ea
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts
@@ -0,0 +1,100 @@
+import { AxeBuilder } from '@axe-core/playwright'
+import { expect, test } from '@playwright/test'
+
+import type { Page } from '@playwright/test'
+
+/**
+ * Visual regression tests for OsIcon component
+ *
+ * These tests capture screenshots of Storybook stories and compare them
+ * against baseline images to detect unintended visual changes.
+ * Each test also runs accessibility checks using axe-core.
+ */
+
+const STORY_URL = '/iframe.html?id=components-osicon'
+const STORY_ROOT = '#storybook-root'
+
+/**
+ * Wait for all fonts to be loaded before taking screenshots
+ */
+async function waitForFonts(page: Page) {
+  await page.evaluate(async () => document.fonts.ready)
+}
+
+/**
+ * Helper to run accessibility check on the current page
+ */
+async function checkA11y(page: Page) {
+  const results = await new AxeBuilder({ page }).include(STORY_ROOT).analyze()
+
+  expect(results.violations).toEqual([])
+}
+
+test.describe('OsIcon keyboard accessibility', () => {
+  test('decorative icons are not focusable', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-system-icons&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+
+    const icons = root.locator('.os-icon')
+    const count = await icons.count()
+
+    expect(count).toBeGreaterThan(0)
+
+    for (let i = 0; i < count; i++) {
+      const icon = icons.nth(i)
+
+      await expect(icon).toHaveAttribute('aria-hidden', 'true')
+    }
+  })
+})
+
+test.describe('OsIcon visual regression', () => {
+  test('all system icons', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-system-icons&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForFonts(page)
+
+    await expect(root.locator('.grid')).toHaveScreenshot('all-system-icons.png')
+
+    await checkA11y(page)
+  })
+
+  test('all sizes', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-sizes&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForFonts(page)
+
+    await expect(root.locator('[data-testid="all-sizes"]')).toHaveScreenshot('all-sizes.png')
+
+    await checkA11y(page)
+  })
+
+  test('custom component', async ({ page }) => {
+    await page.goto(`${STORY_URL}--custom-component&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForFonts(page)
+
+    await expect(root.locator('[data-testid="custom-component"]')).toHaveScreenshot(
+      'custom-component.png',
+    )
+
+    await checkA11y(page)
+  })
+
+  test('inherit color', async ({ page }) => {
+    await page.goto(`${STORY_URL}--inherit-color&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForFonts(page)
+
+    await expect(root.locator('[data-testid="inherit-color"]')).toHaveScreenshot(
+      'inherit-color.png',
+    )
+
+    await checkA11y(page)
+  })
+})
diff --git a/packages/ui/src/components/OsIcon/OsIcon.vue b/packages/ui/src/components/OsIcon/OsIcon.vue
new file mode 100644
index 000000000..ba39b3074
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/OsIcon.vue
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { defineComponent, getCurrentInstance, h, isVue2 } from 'vue-demi'
+
+  import { cn } from '#src/utils'
+
+  import { ICON_SIZES } from './icon.variants'
+  import { SYSTEM_ICONS } from './icons'
+
+  import type { Size } from '#src/types'
+  import type { SystemIconName } from './icons'
+  import type { ClassValue } from 'clsx'
+  import type { Component, PropType } from 'vue-demi'
+
+  /**
+   * Renders system icons by name or custom Vue components.
+   * @prop name - System icon name (e.g. 'close', 'check')
+   * @prop icon - Vue component to render as icon (takes precedence over name)
+   * @prop size - Icon size (xs/sm/md/lg/xl/2xl)
+   */
+  export default defineComponent({
+    name: 'OsIcon',
+    inheritAttrs: false,
+    props: {
+      name: {
+        type: String,
+        default: undefined,
+      },
+      icon: {
+        type: [Object, Function] as PropType<Component>,
+        default: undefined,
+      },
+      size: {
+        type: String as PropType<Size>,
+        default: 'md',
+      },
+    },
+    setup(props, { attrs }) {
+      /* v8 ignore start -- Vue 2 only */
+      const instance = isVue2 ? getCurrentInstance() : null
+      /* v8 ignore stop */
+
+      return () => {
+        // icon prop takes precedence over name
+        const iconComponent =
+          props.icon || (props.name ? SYSTEM_ICONS[props.name as SystemIconName] : undefined)
+
+        if (!iconComponent) return null
+
+        const sizeClass = ICON_SIZES[props.size]
+
+        // Vue 2's h() cannot handle plain arrow functions as components (only
+        // constructor functions or option objects). SYSTEM_ICONS entries are
+        // arrow functions that return VNodes, so call them directly.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const isRenderFn = typeof iconComponent === 'function' && !(iconComponent as any).cid
+        const iconVNode = isRenderFn
+          ? (iconComponent as () => ReturnType<typeof h>)()
+          : h(iconComponent)
+
+        /* v8 ignore start -- Vue 2 branch tested in webapp Jest tests */
+        if (isVue2) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const proxy = instance?.proxy as any
+          const parentClass = proxy?.$vnode?.data?.staticClass || ''
+          const parentDynClass = proxy?.$vnode?.data?.class
+          const parentAttrs = proxy?.$vnode?.data?.attrs || {}
+
+          const hasLabel = !!(parentAttrs['aria-label'] || attrs['aria-label'])
+          const a11yAttrs = hasLabel
+            ? { role: 'img', 'aria-label': parentAttrs['aria-label'] || attrs['aria-label'] }
+            : { 'aria-hidden': 'true' }
+
+          return h(
+            'span',
+            {
+              class: [
+                cn(
+                  'os-icon inline-flex items-center shrink-0',
+                  sizeClass,
+                  '[&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current',
+                ),
+                parentClass,
+                parentDynClass,
+              ].filter(Boolean),
+              attrs: { ...a11yAttrs, ...parentAttrs, ...attrs },
+            },
+            [iconVNode],
+          )
+        }
+        /* v8 ignore stop */
+
+        const {
+          class: attrClass,
+          'aria-label': ariaLabel,
+          ...restAttrs
+        } = attrs as Record<string, unknown>
+        const hasLabel = !!ariaLabel
+        const a11yAttrs = hasLabel
+          ? { role: 'img', 'aria-label': ariaLabel }
+          : { 'aria-hidden': 'true' }
+
+        return h(
+          'span',
+          {
+            class: cn(
+              'os-icon inline-flex items-center shrink-0',
+              sizeClass,
+              '[&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current',
+              attrClass as ClassValue,
+            ),
+            ...a11yAttrs,
+            ...restAttrs,
+          },
+          [iconVNode],
+        )
+      }
+    },
+  })
+</script>
diff --git a/packages/ui/src/components/OsIcon/__screenshots__/chromium/all-sizes.png b/packages/ui/src/components/OsIcon/__screenshots__/chromium/all-sizes.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7823e4853feda13bb779e39afcd8bdc75fe37da
GIT binary patch
literal 3063
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsIcon/__screenshots__/chromium/all-system-icons.png b/packages/ui/src/components/OsIcon/__screenshots__/chromium/all-system-icons.png
new file mode 100644
index 0000000000000000000000000000000000000000..87cc91ac8b65e8a98d60a1bbee7c17fb8111fe52
GIT binary patch
literal 4636
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
I-En#RKPuhNLjV8(

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsIcon/__screenshots__/chromium/custom-component.png b/packages/ui/src/components/OsIcon/__screenshots__/chromium/custom-component.png
new file mode 100644
index 0000000000000000000000000000000000000000..aaede8b34f6672ec816b6e5a49c68b012c1c912f
GIT binary patch
literal 1471
zcmXX`c{G%382|3QIF`dmmWG>Y9A-|WLJVb@vLCl;1~Y|BL!xAGnI+3uFLD(wQ4un!
zu`f5qK8c27i!3S2j85II$d+Xy)7<Zy?myrAocDWvzvp>=@9%xn@i=E?MQud@0F+%_
z9NYmwW*&?W$^Q&~PsC*>0Dvsb)#0?~jR&9S+*~}V2fEh#u3?q0>t}QyzQ;Cg%Qks^
z!OBHGb*}8@f}W@R>CJtK*)DJy)Cbfp#bAPi{F$6P<w}?&Q^9G%s}v>vV7HEduum*-
z_ndh0D)Ob}yrg+-gSWb{Jreoy*Nvf}TVPoLs22=D^??M~A^cBJV4H}Qh1Rb!xgiv>
zSgfI;VQ+75RLh{#i6l~HW+pTM&~-z{1mD-&tG0hXb7dB;rltmmUu(F)X0szABZJO!
zI2<95rK71C*yMds#Tkzu6?DdokBxn`I1HhW-w`@3)$Z=@UZ1LMYHU1msg1cRD8z&v
zC3h@DwC30K_Vxx|xk454e4%VW?m{z`m^?5&J)M)2GdharjJJZow@YAmd_JE_r3Q@@
zH_a>;T2R%*G&=pDRYU-VG9RXsl$<<Qotl<*o=ChuY~7*+aqaq)V5y;@yr_*pU*EaC
zyi?4Tj(CZ!mDSGszN`%`(W<bdsHn!2NQ+pRwIV)aKhMxQM&`vz+Xgy~t&^u`W@46J
z*UYsuzwPWeIy+ZoFMawH^?ff2i^WnX6bFYFb(fwwz|76fgVkGGaCz0$M+%3zV341$
znbt$_^wf{W#}h6W8N%Uk4-XHi_@gtkGW789wKolymzS3_rWl{!lxox0H8iqey4I@7
zC^R|?VONVPFGe(Y*WA8+TQkG4v43bN_REL#t0WRh6Au5;pYQNle2FcqtqhlEK(Ev{
zFrYJ;8FDEpDOHsokDop@L!+HfjN95yiXtH?fQ(_;U<QMWZg+Na`m(X%n7p_c?A6&+
z<n134^4sQdYwIJ@v`(?gM0$F9X(<v0qtR$L<*vshM8?KmJaOvA+QWr+qowx$53!2f
z5{a6<Yjkxj!{-yO)^p$c`T4Q$A4TZN7(z@3F0W_`TUsp7F{<u>Q)nnZz;UX{G+N_T
z#=CCW+<yJ(KT=bREq^~FEgM~^#O=#M#Qc2<iS(P{QrU?G55bd&B0B5o>ETLjjSH4%
znpYPmtJr7V-E-cCXhNt2!AG*$BYiYFC?KHaZE%yfj<z;v14o@LB%_@b5iyoK9Q@JC
z+q=^3p<!NLo=Tei>jD1;a4H#DSp|py8>ZCU!HeD+7)~HGd6CJ*+b4;cx;DH23~IqJ
zL4kpbM9x5k2dA+^acgO+ZbGX2fdC|aI4}~2d-<nmcRIx4?%?D1PwzH|32|<2-~Q!F
zzN`9n#)(f_TVEud6QkGH*QI(L@9j3`ZSdkH#rN)6O1L8+T|8)`!F*#jX0p7Zq9Wdh
zwYl)Bow@n~sHv$T5C}y@Ma2m4B>G22L?V%vbY2sZyr(07rY8+nRarSUKE5h^b}W^k
zP#MS_l%#?8BFfa?*KD#J#~JTowpA7w8yYIg%d1MEek7F%FBXf1L?Zp`OYGvoE6NNH
z58s~Z>gqaIVr!tUfAhKLqh3DW9D`{WGQRKaAnf8o1RY)w8gPmbk@3eSD%22&Iztl_
z%1I2`u|G9c4&2*|s^_+~?T$Tm3*9a&D^pij$8#XeyzC09ocv^LbM0LZD%Z8c$i~LT
z+?*aA9lg%4@oA3xw!J)%XCzf;O%b6uLH`iZ8amrzB587EwA)}X%#mW7AAdE&vW!^c
z_sxO|3JToa-9s#9(qM>z!NCd-sLq-xsvKH@5{lFnKrE0beYVyVemJoUt@?k$njM%X
jkqF@ZU%)^PdVhZbk`y}SoR)n4f+$=aaSpX-C`tbTG5e8a

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsIcon/__screenshots__/chromium/in-button.png b/packages/ui/src/components/OsIcon/__screenshots__/chromium/in-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..231fdae5a830577067e4a9d461f8724deacd407e
GIT binary patch
literal 6266
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
VsEEvMvmfrDD9WnJluEq~_#gVQHZcGI

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsIcon/__screenshots__/chromium/inherit-color.png b/packages/ui/src/components/OsIcon/__screenshots__/chromium/inherit-color.png
new file mode 100644
index 0000000000000000000000000000000000000000..4058719bf3d7856fa6d8e10f917d0d01e71f692c
GIT binary patch
literal 2226
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsIcon/icon.variants.ts b/packages/ui/src/components/OsIcon/icon.variants.ts
new file mode 100644
index 000000000..0598648be
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/icon.variants.ts
@@ -0,0 +1,10 @@
+import type { Size } from '#src/types'
+
+export const ICON_SIZES: Record<Size, string> = {
+  xs: 'h-[0.75em]',
+  sm: 'h-[0.875em]',
+  md: 'h-[1.2em]',
+  lg: 'h-[1.5em]',
+  xl: 'h-[2em]',
+  '2xl': 'h-[2.5em]',
+}
diff --git a/packages/ui/src/components/OsIcon/icons/index.ts b/packages/ui/src/components/OsIcon/icons/index.ts
new file mode 100644
index 000000000..b310563f3
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/icons/index.ts
@@ -0,0 +1,17 @@
+import _IconCheck from './svgs/check.svg?icon'
+import _IconClose from './svgs/close.svg?icon'
+import _IconPlus from './svgs/plus.svg?icon'
+
+import type { Component } from 'vue-demi'
+
+export const IconCheck = _IconCheck
+export const IconClose = _IconClose
+export const IconPlus = _IconPlus
+
+export const SYSTEM_ICONS = {
+  check: IconCheck,
+  close: IconClose,
+  plus: IconPlus,
+} as const satisfies Record<string, Component>
+
+export type SystemIconName = keyof typeof SYSTEM_ICONS
diff --git a/packages/ui/src/components/OsIcon/icons/svgs/check.svg b/packages/ui/src/components/OsIcon/icons/svgs/check.svg
new file mode 100644
index 000000000..580bb8c92
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/icons/svgs/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<path d="M28.281 6.281l1.438 1.438-18 18-0.719 0.688-0.719-0.688-8-8 1.438-1.438 7.281 7.281z"/>
+</svg>
diff --git a/packages/ui/src/components/OsIcon/icons/svgs/close.svg b/packages/ui/src/components/OsIcon/icons/svgs/close.svg
new file mode 100644
index 000000000..0f2aaa6a3
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/icons/svgs/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<path d="M7.219 5.781l8.781 8.781 8.781-8.781 1.438 1.438-8.781 8.781 8.781 8.781-1.438 1.438-8.781-8.781-8.781 8.781-1.438-1.438 8.781-8.781-8.781-8.781z"/>
+</svg>
diff --git a/packages/ui/src/components/OsIcon/icons/svgs/plus.svg b/packages/ui/src/components/OsIcon/icons/svgs/plus.svg
new file mode 100644
index 000000000..21b6b47fb
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/icons/svgs/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<path d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"/>
+</svg>
diff --git a/packages/ui/src/components/OsIcon/index.ts b/packages/ui/src/components/OsIcon/index.ts
new file mode 100644
index 000000000..8bdb52919
--- /dev/null
+++ b/packages/ui/src/components/OsIcon/index.ts
@@ -0,0 +1,3 @@
+export { default as OsIcon } from './OsIcon.vue'
+export { ICON_SIZES } from './icon.variants'
+export { IconCheck, IconClose, IconPlus, SYSTEM_ICONS, type SystemIconName } from './icons'
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 46935b48c..3cea2d04d 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -8,3 +8,12 @@
  */
 
 export { OsButton, buttonVariants, type ButtonVariants } from './OsButton'
+export {
+  OsIcon,
+  ICON_SIZES,
+  IconCheck,
+  IconClose,
+  IconPlus,
+  SYSTEM_ICONS,
+  type SystemIconName,
+} from './OsIcon'
diff --git a/packages/ui/src/ocelot/icons/OcelotIcons.stories.ts b/packages/ui/src/ocelot/icons/OcelotIcons.stories.ts
new file mode 100644
index 000000000..2dbfc5fe3
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/OcelotIcons.stories.ts
@@ -0,0 +1,46 @@
+import { OsIcon, SYSTEM_ICONS } from '#src/components/OsIcon'
+
+import { ocelotIcons } from './index'
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta: Meta = {
+  title: 'Ocelot/Icons',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+const systemEntries = Object.entries(SYSTEM_ICONS)
+const ocelotEntries = Object.entries(ocelotIcons)
+
+export const AllIcons: StoryObj = {
+  render: () => ({
+    components: { OsIcon },
+    setup() {
+      return { systemEntries, ocelotEntries }
+    },
+    template: `
+      <div data-testid="icon-gallery" class="flex flex-col gap-6">
+        <div>
+          <h3 class="text-sm font-bold mb-2">Library Icons</h3>
+          <div class="grid grid-cols-5 gap-4">
+            <div v-for="[name, icon] in systemEntries" :key="name" class="flex flex-col items-center gap-2 p-3 rounded border border-gray-200">
+              <OsIcon :icon="icon" size="xl" />
+              <span class="text-xs text-gray-600">{{ name }}</span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-bold mb-2">Ocelot Icons</h3>
+          <div class="grid grid-cols-5 gap-4">
+            <div v-for="[name, icon] in ocelotEntries" :key="name" class="flex flex-col items-center gap-2 p-3 rounded border border-gray-200">
+              <OsIcon :icon="icon" size="xl" />
+              <span class="text-xs text-gray-600">{{ name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}
diff --git a/packages/ui/src/ocelot/icons/OcelotIcons.visual.spec.ts b/packages/ui/src/ocelot/icons/OcelotIcons.visual.spec.ts
new file mode 100644
index 000000000..7721cdcc6
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/OcelotIcons.visual.spec.ts
@@ -0,0 +1,73 @@
+import { AxeBuilder } from '@axe-core/playwright'
+import { expect, test } from '@playwright/test'
+
+import type { Page } from '@playwright/test'
+
+/**
+ * Visual regression tests for Ocelot Icons
+ *
+ * These tests capture screenshots of Storybook stories and compare them
+ * against baseline images to detect unintended visual changes.
+ * Each test also runs accessibility checks using axe-core.
+ */
+
+const STORY_URL = '/iframe.html?id=ocelot-icons'
+const STORY_ROOT = '#storybook-root'
+
+/**
+ * Wait for all fonts to be loaded before taking screenshots
+ */
+async function waitForFonts(page: Page) {
+  await page.evaluate(async () => document.fonts.ready)
+}
+
+/**
+ * Helper to run accessibility check on the current page
+ */
+async function checkA11y(page: Page) {
+  const results = await new AxeBuilder({ page }).include(STORY_ROOT).analyze()
+
+  expect(results.violations).toEqual([])
+}
+
+test.describe('OcelotIcons keyboard accessibility', () => {
+  test('all icons are decorative (not focusable)', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-icons&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+
+    const icons = root.locator('.os-icon')
+    const count = await icons.count()
+
+    expect(count).toBeGreaterThan(0)
+
+    for (let i = 0; i < count; i++) {
+      const icon = icons.nth(i)
+
+      await expect(icon).toHaveAttribute('aria-hidden', 'true')
+      const tabindex = await icon.getAttribute('tabindex')
+      expect(tabindex, `icon ${String(i)} should not have tabindex`).toBeNull()
+    }
+
+    // Verify no icon receives focus when tabbing through
+    await page.keyboard.press('Tab')
+    for (let i = 0; i < count; i++) {
+      const icon = icons.nth(i)
+
+      await expect(icon).not.toBeFocused()
+    }
+  })
+})
+
+test.describe('OcelotIcons visual regression', () => {
+  test('all icons', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-icons&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForFonts(page)
+
+    await expect(root.locator('[data-testid="icon-gallery"]')).toHaveScreenshot('all-icons.png')
+
+    await checkA11y(page)
+  })
+})
diff --git a/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png b/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png
new file mode 100644
index 0000000000000000000000000000000000000000..976455790af82626b317e958089bab763a9cd5ad
GIT binary patch
literal 9187
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/ocelot/icons/index.spec.ts b/packages/ui/src/ocelot/icons/index.spec.ts
new file mode 100644
index 000000000..167aec430
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/index.spec.ts
@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import { h } from 'vue'
+
+import OsIcon from '#src/components/OsIcon/OsIcon.vue'
+
+import { ocelotIcons } from './index'
+
+describe('ocelot icons', () => {
+  const IconAngleDown = ocelotIcons.IconAngleDown
+
+  describe('exports', () => {
+    it('exports ocelotIcons as a record of functions', () => {
+      expectTypeOf(ocelotIcons).toBeObject()
+
+      expect(Object.keys(ocelotIcons).length).toBeGreaterThan(0)
+    })
+
+    it('auto-discovers all SVGs in svgs/ directory', () => {
+      expect(ocelotIcons).toHaveProperty('IconAngleDown')
+
+      expectTypeOf(IconAngleDown).toBeFunction()
+    })
+  })
+
+  describe('iconAngleDown', () => {
+    it('renders an SVG with correct viewBox', () => {
+      const vnode = IconAngleDown()
+
+      expect(vnode).toBeDefined()
+
+      const wrapper = mount({
+        render: () => h('div', [IconAngleDown()]),
+      })
+      const svg = wrapper.find('svg')
+
+      expect(svg.exists()).toBe(true)
+      expect(svg.attributes('viewBox')).toBe('0 0 32 32')
+    })
+
+    it('works with OsIcon :icon prop', () => {
+      const wrapper = mount(OsIcon, {
+        props: { icon: IconAngleDown },
+      })
+
+      expect(wrapper.find('.os-icon').exists()).toBe(true)
+      expect(wrapper.find('svg').exists()).toBe(true)
+      expect(wrapper.find('path').exists()).toBe(true)
+    })
+  })
+
+  describe('keyboard accessibility', () => {
+    it('icon via :icon prop is not focusable (decorative element)', () => {
+      const wrapper = mount(OsIcon, {
+        props: { icon: IconAngleDown },
+      })
+
+      expect(wrapper.attributes('tabindex')).toBeUndefined()
+      expect(wrapper.attributes('aria-hidden')).toBe('true')
+    })
+  })
+})
diff --git a/packages/ui/src/ocelot/icons/index.ts b/packages/ui/src/ocelot/icons/index.ts
new file mode 100644
index 000000000..cfaaf16e9
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/index.ts
@@ -0,0 +1,24 @@
+import type { VNode } from 'vue-demi'
+
+const modules = import.meta.glob<() => VNode>('./svgs/*.svg', {
+  query: '?icon',
+  eager: true,
+  import: 'default',
+})
+
+function toName(path: string): string {
+  return (
+    'Icon' +
+    path
+      .replace('./svgs/', '')
+      .replace('.svg', '')
+      .split('-')
+      .filter(Boolean)
+      .map((s) => s[0].toUpperCase() + s.slice(1))
+      .join('')
+  )
+}
+
+export const ocelotIcons: Record<string, () => VNode> = Object.fromEntries(
+  Object.entries(modules).map(([path, icon]) => [toName(path), icon]),
+)
diff --git a/packages/ui/src/ocelot/icons/svgs/angle-down.svg b/packages/ui/src/ocelot/icons/svgs/angle-down.svg
new file mode 100755
index 000000000..aa6f763c8
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/svgs/angle-down.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>angle-down</title>
+<path d="M4.219 10.781l11.781 11.781 11.781-11.781 1.438 1.438-12.5 12.5-0.719 0.688-0.719-0.688-12.5-12.5z"></path>
+</svg>
diff --git a/packages/ui/src/ocelot/index.ts b/packages/ui/src/ocelot/index.ts
new file mode 100644
index 000000000..81cf076ed
--- /dev/null
+++ b/packages/ui/src/ocelot/index.ts
@@ -0,0 +1,2 @@
+// Ocelot migration icons — temporary, will be removed after Vue 3 migration
+export { ocelotIcons } from './icons'
diff --git a/packages/ui/src/plugins/vite-svg-icon.ts b/packages/ui/src/plugins/vite-svg-icon.ts
new file mode 100644
index 000000000..38730d400
--- /dev/null
+++ b/packages/ui/src/plugins/vite-svg-icon.ts
@@ -0,0 +1,64 @@
+import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+
+import type { Plugin } from 'vite'
+
+const SUFFIX = '?icon'
+
+/** Escape a string for safe embedding in a single-quoted JS literal */
+function escapeJS(str: string): string {
+  return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+}
+
+export default function svgIcon(): Plugin {
+  return {
+    name: 'svg-icon',
+    enforce: 'pre',
+
+    resolveId(source, importer) {
+      if (!source.endsWith(SUFFIX)) return null
+      const svgPath = source.slice(0, -SUFFIX.length)
+      const resolved = importer ? resolve(importer, '..', svgPath) : svgPath
+      return `\0svg-icon:${resolved}`
+    },
+
+    async load(id) {
+      if (!id.startsWith('\0svg-icon:')) return null
+      const filePath = id.slice('\0svg-icon:'.length)
+      // eslint-disable-next-line security/detect-non-literal-fs-filename -- resolved from Vite import graph
+      const svg = await readFile(filePath, 'utf-8')
+
+      const viewBoxRegex = /viewBox="([^"]+)"/
+      const viewBoxMatch = viewBoxRegex.exec(svg)
+      const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 32 32'
+
+      const unsupported = svg.match(/<(?:circle|rect|polygon|polyline|ellipse|line)\s/g)
+      if (unsupported) {
+        this.warn(
+          `${filePath}: unsupported SVG elements will be ignored: ${[...new Set(unsupported.map((s) => s.trim()))].join(', ')}`,
+        )
+      }
+
+      const paths: string[] = []
+      const pathRegex = /<path\s[^>]*?\bd="([^"]+)"/g
+      let match: RegExpExecArray | null
+      while ((match = pathRegex.exec(svg)) !== null) {
+        paths.push(match[1])
+      }
+
+      const pathElements = paths
+        .map((d) => {
+          const escaped = escapeJS(d)
+          return `h('path', isVue2 ? { attrs: { d: '${escaped}' } } : { d: '${escaped}' })`
+        })
+        .join(', ')
+
+      const safeViewBox = escapeJS(viewBox)
+
+      return `import { h, isVue2 } from 'vue-demi'
+const svgAttrs = { xmlns: 'http://www.w3.org/2000/svg', viewBox: '${safeViewBox}', fill: 'currentColor' }
+export default () => h('svg', isVue2 ? { attrs: svgAttrs } : svgAttrs, [${pathElements}])
+`
+    },
+  }
+}
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 6f2c43004..e3c6d09fb 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -13,6 +13,7 @@
 
 /* Scan component files for utility classes */
 @source "../components/**/*.vue";
+@source "../ocelot/**/*.vue";
 @source "../**/*.ts";
 
 /*
diff --git a/packages/ui/src/svg-icon.d.ts b/packages/ui/src/svg-icon.d.ts
new file mode 100644
index 000000000..cbd0d2c17
--- /dev/null
+++ b/packages/ui/src/svg-icon.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg?icon' {
+  import type { VNode } from 'vue-demi'
+
+  const icon: () => VNode
+  export default icon
+}
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index de82db9d6..8d37025c8 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -9,6 +9,8 @@ import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import { defineConfig } from 'vitest/config'
 
+import svgIcon from './src/plugins/vite-svg-icon'
+
 const execAsync = promisify(exec)
 
 export default defineConfig({
@@ -16,6 +18,7 @@ export default defineConfig({
     exclude: ['vue-demi'],
   },
   plugins: [
+    svgIcon(),
     vue(),
     tailwindcss(),
     tsconfigPaths(),
@@ -28,6 +31,7 @@ export default defineConfig({
         // Generate .d.cts files for CJS compatibility
         await copyFile('dist/index.d.ts', 'dist/index.d.cts')
         await copyFile('dist/tailwind.preset.d.ts', 'dist/tailwind.preset.d.cts')
+        await copyFile('dist/ocelot.d.ts', 'dist/ocelot.d.cts')
       },
     }),
     // Build CSS separately using Tailwind CLI
@@ -43,6 +47,7 @@ export default defineConfig({
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
         'tailwind.preset': resolve(__dirname, 'src/tailwind.preset.ts'),
+        ocelot: resolve(__dirname, 'src/ocelot/index.ts'),
       },
       formats: ['es', 'cjs'],
       fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
@@ -64,7 +69,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,ts}'],
-    exclude: ['src/**/*.visual.spec.ts'],
+    exclude: ['src/**/*.visual.spec.ts', 'src/plugins/**'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'json-summary', 'html'],
@@ -74,6 +79,7 @@ export default defineConfig({
         'src/**/*.{test,spec}.ts',
         'src/**/*.stories.ts',
         'src/**/index.ts',
+        'src/plugins/**',
       ],
       thresholds: {
         100: true,
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index d19f0bf95..444776ca1 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -20,7 +20,7 @@
             placement: 'bottom-start',
           }"
         />
-        <base-icon class="dropdown-arrow" name="angle-down" />
+        <os-icon class="dropdown-arrow" :icon="ocelotIcons.IconAngleDown" />
       </a>
     </template>
     <template #popover="{ closeMenu }">
@@ -59,6 +59,8 @@
 </template>
 
 <script>
+import { OsIcon } from '@ocelot-social/ui'
+import { ocelotIcons } from '@ocelot-social/ui/ocelot'
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
@@ -66,11 +68,15 @@ import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar
 export default {
   components: {
     Dropdown,
+    OsIcon,
     ProfileAvatar,
   },
   props: {
     placement: { type: String, default: 'top-end' },
   },
+  setup() {
+    return { ocelotIcons }
+  },
   computed: {
     ...mapGetters({
       user: 'auth/user',
diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue
index 692f14994..8e71dad13 100644
--- a/webapp/components/Chat/AddChatRoomByUserSearch.vue
+++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue
@@ -12,7 +12,7 @@
         @click="closeUserSearch"
       >
         <template #icon>
-          <base-icon name="close" />
+          <os-icon name="close" />
         </template>
       </os-button>
     </ds-flex>
@@ -24,13 +24,14 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import SelectUserSearch from '~/components/generic/SelectUserSearch/SelectUserSearch'
 
 export default {
   name: 'AddChatRoomByUserSearch',
   components: {
     OsButton,
+    OsIcon,
     SelectUserSearch,
   },
   props: {
diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 986c8d748..4a17d850d 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -60,7 +60,7 @@
                 @click="$emit('close-single-room', true)"
               >
                 <template #icon>
-                  <base-icon name="close" />
+                  <os-icon name="close" />
                 </template>
               </os-button>
             </slot>
@@ -105,7 +105,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { roomQuery, createRoom, unreadRoomsQuery } from '~/graphql/Rooms'
 import {
   messageQuery,
@@ -118,7 +118,7 @@ import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   name: 'Chat',
-  components: { OsButton },
+  components: { OsButton, OsIcon },
   props: {
     theme: {
       type: String,
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 12230978b..6d6889f69 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -190,7 +190,7 @@
                 :disabled="!!errors"
               >
                 <template #icon>
-                  <base-icon name="check" />
+                  <os-icon name="check" />
                 </template>
                 {{ $t('actions.save') }}
               </os-button>
@@ -202,7 +202,7 @@
   </div>
 </template>
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
 import Editor from '~/components/Editor/Editor'
@@ -223,6 +223,7 @@ export default {
     Editor,
     ImageUploader,
     OsButton,
+    OsIcon,
     PageParamsLink,
   },
   props: {
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index 27d29e5e1..b68b39681 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -10,7 +10,7 @@
       >
         <base-icon name="filter" />
         <label class="label" for="dropdown">{{ selected }}</label>
-        <base-icon class="dropdown-arrow" name="angle-down" />
+        <os-icon class="dropdown-arrow" :icon="ocelotIcons.IconAngleDown" />
       </a>
     </template>
     <template #popover="{ toggleMenu }">
@@ -30,11 +30,17 @@
   </dropdown>
 </template>
 <script>
+import { OsIcon } from '@ocelot-social/ui'
+import { ocelotIcons } from '@ocelot-social/ui/ocelot'
 import Dropdown from '~/components/Dropdown'
 
 export default {
   components: {
     Dropdown,
+    OsIcon,
+  },
+  setup() {
+    return { ocelotIcons }
   },
   props: {
     selected: { type: String, default: '' },
diff --git a/webapp/components/Embed/EmbedComponent.vue b/webapp/components/Embed/EmbedComponent.vue
index d2b5057a9..5e4f7b286 100644
--- a/webapp/components/Embed/EmbedComponent.vue
+++ b/webapp/components/Embed/EmbedComponent.vue
@@ -57,14 +57,14 @@
       @click.prevent="removeEmbed()"
     >
       <template #icon>
-        <base-icon name="close" />
+        <os-icon name="close" />
       </template>
     </os-button>
   </ds-container>
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { mapGetters, mapMutations } from 'vuex'
 import { updateUserMutation } from '~/graphql/User.js'
 
@@ -72,6 +72,7 @@ export default {
   name: 'embed-component',
   components: {
     OsButton,
+    OsIcon,
   },
   props: {
     dataEmbedUrl: {
diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue
index 4b8d760a5..9e3e4d0ee 100644
--- a/webapp/components/FilterMenu/CategoriesFilter.vue
+++ b/webapp/components/FilterMenu/CategoriesFilter.vue
@@ -9,7 +9,7 @@
           @click="setResetCategories"
         >
           <template #icon>
-            <base-icon name="check" />
+            <os-icon name="check" />
           </template>
           {{ $t('filter-menu.all') }}
         </os-button>
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import SortCategories from '~/mixins/sortCategoriesMixin.js'
@@ -49,6 +49,7 @@ export default {
   components: {
     FilterMenuSection,
     OsButton,
+    OsIcon,
   },
   mixins: [SortCategories, GetCategories],
   computed: {
diff --git a/webapp/components/FilterMenu/EventsByFilter.vue b/webapp/components/FilterMenu/EventsByFilter.vue
index f60871b19..5f1309d50 100644
--- a/webapp/components/FilterMenu/EventsByFilter.vue
+++ b/webapp/components/FilterMenu/EventsByFilter.vue
@@ -11,7 +11,7 @@
           data-test="all-button"
         >
           <template #icon>
-            <base-icon name="check" />
+            <os-icon name="check" />
           </template>
           {{ $t('filter-menu.ended.all.label') }}
         </os-button>
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 
@@ -45,6 +45,7 @@ export default {
   components: {
     FilterMenuSection,
     OsButton,
+    OsIcon,
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index b515c24b9..08db1cf9e 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -10,7 +10,7 @@
         <template #icon>
           <base-icon name="filter" />
         </template>
-        <base-icon class="dropdown-arrow" name="angle-down" />
+        <os-icon class="dropdown-arrow" :icon="ocelotIcons.IconAngleDown" />
       </os-button>
     </template>
     <template #popover>
@@ -20,7 +20,8 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
+import { ocelotIcons } from '@ocelot-social/ui/ocelot'
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FilterMenuComponent from './FilterMenuComponent'
@@ -30,6 +31,10 @@ export default {
     Dropdown,
     FilterMenuComponent,
     OsButton,
+    OsIcon,
+  },
+  setup() {
+    return { ocelotIcons }
   },
   props: {
     placement: { type: String },
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index b906b9b4e..26e0c4224 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -15,7 +15,7 @@
           @click="setResetFollowers"
         >
           <template #icon>
-            <base-icon name="check" />
+            <os-icon name="check" />
           </template>
           {{ $t('filter-menu.all') }}
         </os-button>
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { mapGetters, mapMutations } from 'vuex'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 
@@ -64,6 +64,7 @@ export default {
   components: {
     FilterMenuSection,
     OsButton,
+    OsIcon,
   },
   computed: {
     ...mapGetters({
diff --git a/webapp/components/FilterMenu/HeaderButton.vue b/webapp/components/FilterMenu/HeaderButton.vue
index 906422a48..066207b72 100644
--- a/webapp/components/FilterMenu/HeaderButton.vue
+++ b/webapp/components/FilterMenu/HeaderButton.vue
@@ -14,17 +14,17 @@
       @click.stop="clickRemove"
     >
       <template #icon>
-        <base-icon name="close" />
+        <os-icon name="close" />
       </template>
     </os-button>
   </span>
 </template>
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 
 export default {
   name: 'HeaderButton',
-  components: { OsButton },
+  components: { OsButton, OsIcon },
   props: {
     title: {
       type: String,
diff --git a/webapp/components/HashtagsFilter/HashtagsFilter.vue b/webapp/components/HashtagsFilter/HashtagsFilter.vue
index ef1aa5234..0a83023ce 100644
--- a/webapp/components/HashtagsFilter/HashtagsFilter.vue
+++ b/webapp/components/HashtagsFilter/HashtagsFilter.vue
@@ -11,17 +11,17 @@
       @click="clearSearch"
     >
       <template #icon>
-        <base-icon name="close" />
+        <os-icon name="close" />
       </template>
     </os-button>
   </base-card>
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 
 export default {
-  components: { OsButton },
+  components: { OsButton, OsIcon },
   props: {
     hashtag: {
       type: String,
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 11ecb3c2f..853c7a521 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -13,7 +13,7 @@
         >
           <!-- <base-icon name="globe" /> -->
           <span class="label">{{ current.code.toUpperCase() }}</span>
-          <base-icon class="dropdown-arrow" name="angle-down" />
+          <os-icon class="dropdown-arrow" :icon="ocelotIcons.IconAngleDown" />
         </a>
       </template>
       <template #popover="{ toggleMenu }">
@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import { OsIcon } from '@ocelot-social/ui'
+import { ocelotIcons } from '@ocelot-social/ui/ocelot'
 import gql from 'graphql-tag'
 import Dropdown from '~/components/Dropdown'
 import find from 'lodash/find'
@@ -45,6 +47,10 @@ import { mapGetters, mapMutations } from 'vuex'
 export default {
   components: {
     Dropdown,
+    OsIcon,
+  },
+  setup() {
+    return { ocelotIcons }
   },
   props: {
     placement: { type: String, default: 'bottom-start' },
diff --git a/webapp/components/Modal/ReportModal.vue b/webapp/components/Modal/ReportModal.vue
index 6188cb0e4..f247a27d9 100644
--- a/webapp/components/Modal/ReportModal.vue
+++ b/webapp/components/Modal/ReportModal.vue
@@ -31,7 +31,7 @@
     <template #footer>
       <os-button class="cancel" variant="primary" appearance="outline" @click="cancel">
         <template #icon>
-          <base-icon name="close" />
+          <os-icon name="close" />
         </template>
         {{ $t('report.cancel') }}
       </os-button>
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import { reportMutation } from '~/graphql/Moderation.js'
 import { valuesReasonCategoryOptions } from '~/constants/modals.js'
@@ -64,6 +64,7 @@ export default {
   name: 'ReportModal',
   components: {
     OsButton,
+    OsIcon,
     SweetalertIcon,
   },
   props: {
diff --git a/webapp/components/Select/LocationSelect.vue b/webapp/components/Select/LocationSelect.vue
index fde9fa18f..90e87cf7b 100644
--- a/webapp/components/Select/LocationSelect.vue
+++ b/webapp/components/Select/LocationSelect.vue
@@ -23,20 +23,20 @@
       style="right: -94%; top: -48px"
       @click="clearLocationName"
     >
-      <template #icon><base-icon name="close" /></template>
+      <template #icon><os-icon name="close" /></template>
     </os-button>
   </div>
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { queryLocations } from '~/graphql/location'
 
 let timeout
 
 export default {
   name: 'LocationSelect',
-  components: { OsButton },
+  components: { OsButton, OsIcon },
   props: {
     value: {
       required: true,
diff --git a/webapp/components/Uploader/ImageUploader.vue b/webapp/components/Uploader/ImageUploader.vue
index 5d4b73423..9ba2d0883 100644
--- a/webapp/components/Uploader/ImageUploader.vue
+++ b/webapp/components/Uploader/ImageUploader.vue
@@ -50,7 +50,7 @@
         @click="closeCropper"
       >
         <template #icon>
-          <base-icon name="close" />
+          <os-icon name="close" />
         </template>
       </os-button>
     </div>
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import Cropper from 'cropperjs'
 import VueDropzone from 'nuxt-dropzone'
 import LoadingSpinner from '~/components/_new/generic/LoadingSpinner/LoadingSpinner'
@@ -70,6 +70,7 @@ export default {
   components: {
     LoadingSpinner,
     OsButton,
+    OsIcon,
     VueDropzone,
   },
   props: {
diff --git a/webapp/components/_new/features/Invitations/CreateInvitation.vue b/webapp/components/_new/features/Invitations/CreateInvitation.vue
index b7ec01c39..567047672 100644
--- a/webapp/components/_new/features/Invitations/CreateInvitation.vue
+++ b/webapp/components/_new/features/Invitations/CreateInvitation.vue
@@ -18,7 +18,7 @@
         :disabled="disabled"
       >
         <template #icon>
-          <base-icon name="plus" />
+          <os-icon name="plus" />
         </template>
       </os-button>
     </form>
@@ -26,11 +26,11 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 
 export default {
   name: 'CreateInvitation',
-  components: { OsButton },
+  components: { OsButton, OsIcon },
   props: {
     disabled: {
       type: Boolean,
diff --git a/webapp/components/_new/features/Invitations/__snapshots__/CreateInvitation.spec.js.snap b/webapp/components/_new/features/Invitations/__snapshots__/CreateInvitation.spec.js.snap
index 68966a248..bf128d220 100644
--- a/webapp/components/_new/features/Invitations/__snapshots__/CreateInvitation.spec.js.snap
+++ b/webapp/components/_new/features/Invitations/__snapshots__/CreateInvitation.spec.js.snap
@@ -64,9 +64,18 @@ exports[`CreateInvitation.vue renders 1`] = `
             class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
           >
             <span
-              class="base-icon"
+              aria-hidden="true"
+              class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
             >
-              <!---->
+              <svg
+                fill="currentColor"
+                viewBox="0 0 32 32"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                />
+              </svg>
             </span>
           </span>
         </span>
@@ -141,9 +150,18 @@ exports[`CreateInvitation.vue renders with disabled button 1`] = `
             class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
           >
             <span
-              class="base-icon"
+              aria-hidden="true"
+              class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
             >
-              <!---->
+              <svg
+                fill="currentColor"
+                viewBox="0 0 32 32"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                />
+              </svg>
             </span>
           </span>
         </span>
diff --git a/webapp/components/_new/features/Invitations/__snapshots__/InvitationList.spec.js.snap b/webapp/components/_new/features/Invitations/__snapshots__/InvitationList.spec.js.snap
index 432017fa0..0bec9121d 100644
--- a/webapp/components/_new/features/Invitations/__snapshots__/InvitationList.spec.js.snap
+++ b/webapp/components/_new/features/Invitations/__snapshots__/InvitationList.spec.js.snap
@@ -236,9 +236,18 @@ exports[`InvitationList.vue renders 1`] = `
               class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
             >
               <span
-                class="base-icon"
+                aria-hidden="true"
+                class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
-                <!---->
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 32 32"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                  />
+                </svg>
               </span>
             </span>
           </span>
@@ -324,9 +333,18 @@ exports[`InvitationList.vue renders empty state 1`] = `
               class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
             >
               <span
-                class="base-icon"
+                aria-hidden="true"
+                class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
-                <!---->
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 32 32"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                  />
+                </svg>
               </span>
             </span>
           </span>
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue
index 34d933a49..2ee4aaab9 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.vue
+++ b/webapp/components/generic/SearchableInput/SearchableInput.vue
@@ -59,14 +59,14 @@
       @click="clear"
     >
       <template #icon>
-        <base-icon name="close" />
+        <os-icon name="close" />
       </template>
     </os-button>
   </div>
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { isEmpty } from 'lodash'
 import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
 import SearchPost from '~/components/generic/SearchPost/SearchPost.vue'
@@ -78,6 +78,7 @@ export default {
   name: 'SearchableInput',
   components: {
     OsButton,
+    OsIcon,
     SearchHeading,
     SearchGroup,
     SearchPost,
diff --git a/webapp/jest.config.js b/webapp/jest.config.js
index c7fab92b4..2fd7c2fca 100644
--- a/webapp/jest.config.js
+++ b/webapp/jest.config.js
@@ -47,6 +47,7 @@ module.exports = {
     '^vue-demi$': path.resolve(__dirname, 'node_modules/vue-demi/lib/index.cjs'),
     // UI library - use mock that loads dist with correct vue-demi
     '^@ocelot-social/ui$': '<rootDir>/test/__mocks__/@ocelot-social/ui.js',
+    '^@ocelot-social/ui/ocelot$': '<rootDir>/test/__mocks__/@ocelot-social/ui/ocelot.js',
     '^@ocelot-social/ui/style.css$': 'identity-obj-proxy',
     // Other mappings
     '\\.(svg)$': '<rootDir>/test/fileMock.js',
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 480f4a816..8efaadac1 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -287,6 +287,7 @@ export default {
         ? '/packages/ui/dist'
         : path.resolve(__dirname, '../packages/ui/dist')
       config.resolve.alias['@ocelot-social/ui$'] = path.join(uiLibraryPath, 'index.mjs')
+      config.resolve.alias['@ocelot-social/ui/ocelot$'] = path.join(uiLibraryPath, 'ocelot.mjs')
       config.resolve.alias['@ocelot-social/ui/style.css$'] = path.join(uiLibraryPath, 'style.css')
       config.module.rules.push({
         resourceQuery: /blockType=docs/,
diff --git a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
index 63e729b6a..17dffcb14 100644
--- a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
@@ -948,9 +948,18 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="base-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
-                  <!---->
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
                 </span>
               </span>
             </span>
@@ -2940,9 +2949,18 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="base-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
-                  <!---->
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
                 </span>
               </span>
             </span>
@@ -3951,9 +3969,18 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="base-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
-                  <!---->
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
                 </span>
               </span>
             </span>
@@ -6545,9 +6572,18 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="base-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
-                  <!---->
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
                 </span>
               </span>
             </span>
@@ -7621,9 +7657,18 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="base-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
-                  <!---->
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
                 </span>
               </span>
             </span>
@@ -8638,9 +8683,18 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="base-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
-                  <!---->
+                  <svg
+                    fill="currentColor"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                    />
+                  </svg>
                 </span>
               </span>
             </span>
diff --git a/webapp/pages/groups/_id/_slug.vue b/webapp/pages/groups/_id/_slug.vue
index 0f9e6ecfe..7ab07d1c7 100644
--- a/webapp/pages/groups/_id/_slug.vue
+++ b/webapp/pages/groups/_id/_slug.vue
@@ -235,7 +235,7 @@
             }"
           >
             <template #icon>
-              <base-icon name="plus" />
+              <os-icon name="plus" />
             </template>
           </os-button>
         </ds-space>
@@ -289,7 +289,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import uniqBy from 'lodash/uniqBy'
 import { profilePagePosts } from '~/graphql/PostQuery'
 import { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/groups'
@@ -326,6 +326,7 @@ import GetCategories from '~/mixins/getCategoriesMixin.js'
 export default {
   components: {
     OsButton,
+    OsIcon,
     AvatarUploader,
     Category,
     ContentViewer,
diff --git a/webapp/pages/groups/edit/_id/__snapshots__/invites.spec.js.snap b/webapp/pages/groups/edit/_id/__snapshots__/invites.spec.js.snap
index faea9b04c..1d4fde49a 100644
--- a/webapp/pages/groups/edit/_id/__snapshots__/invites.spec.js.snap
+++ b/webapp/pages/groups/edit/_id/__snapshots__/invites.spec.js.snap
@@ -170,9 +170,18 @@ exports[`invites.vue renders 1`] = `
                   class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
                   <span
-                    class="base-icon"
+                    aria-hidden="true"
+                    class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                   >
-                    <!---->
+                    <svg
+                      fill="currentColor"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                      />
+                    </svg>
                   </span>
                 </span>
               </span>
diff --git a/webapp/pages/groups/index.vue b/webapp/pages/groups/index.vue
index e71960f26..e5548c0eb 100644
--- a/webapp/pages/groups/index.vue
+++ b/webapp/pages/groups/index.vue
@@ -22,7 +22,7 @@
           }"
         >
           <template #icon>
-            <base-icon name="plus" />
+            <os-icon name="plus" />
           </template>
         </os-button>
       </ds-space>
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import GroupList from '~/components/Group/GroupList'
 import { groupQuery, groupCountQuery } from '~/graphql/groups.js'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
@@ -76,6 +76,7 @@ export default {
   name: 'Groups',
   components: {
     OsButton,
+    OsIcon,
     GroupList,
     TabNavigation,
     PaginationButtons,
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 9c76ec10e..8aa40f67f 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -21,7 +21,7 @@
           size="xl"
         >
           <template #icon>
-            <base-icon name="plus" />
+            <os-icon name="plus" />
           </template>
         </os-button>
       </client-only>
@@ -151,7 +151,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import postListActions from '~/mixins/postListActions'
 import mobile from '~/mixins/mobile'
 import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
@@ -175,6 +175,7 @@ export default {
     DonationInfo,
     HashtagsFilter,
     OsButton,
+    OsIcon,
     PostTeaser,
     HcEmpty,
     MasonryGrid,
diff --git a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
index 0b1d82f8a..b1ae4b9fe 100644
--- a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
@@ -1836,9 +1836,18 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
                     class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                   >
                     <span
-                      class="base-icon"
+                      aria-hidden="true"
+                      class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                     >
-                      <!---->
+                      <svg
+                        fill="currentColor"
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                        />
+                      </svg>
                     </span>
                   </span>
                 </span>
@@ -2471,9 +2480,18 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
                     class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                   >
                     <span
-                      class="base-icon"
+                      aria-hidden="true"
+                      class="os-icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                     >
-                      <!---->
+                      <svg
+                        fill="currentColor"
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M15 5h2v10h10v2h-10v10h-2v-10h-10v-2h10v-10z"
+                        />
+                      </svg>
                     </span>
                   </span>
                 </span>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 1a02ad3cf..82019e555 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -161,7 +161,7 @@
                 :aria-label="$t('contribution.newPost')"
               >
                 <template #icon>
-                  <base-icon name="plus" />
+                  <os-icon name="plus" />
                 </template>
               </os-button>
             </div>
@@ -211,7 +211,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import uniqBy from 'lodash/uniqBy'
 import { mapGetters, mapMutations } from 'vuex'
 import postListActions from '~/mixins/postListActions'
@@ -246,6 +246,7 @@ const tabToFilterMapping = ({ tab, id }) => {
 export default {
   components: {
     OsButton,
+    OsIcon,
     SocialMedia,
     PostTeaser,
     HcFollowButton,
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 707696642..2626bf565 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -36,7 +36,7 @@
           :disabled="!!errors"
           :loading="loadingData"
         >
-          <template #icon><base-icon name="check" /></template>
+          <template #icon><os-icon name="check" /></template>
           {{ $t('actions.save') }}
         </os-button>
       </base-card>
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { mapGetters, mapMutations } from 'vuex'
 import UniqueSlugForm from '~/components/utils/UniqueSlugForm'
 import LocationSelect from '~/components/Select/LocationSelect'
@@ -57,6 +57,7 @@ export default {
   name: 'Settings',
   components: {
     OsButton,
+    OsIcon,
     LocationSelect,
   },
   data() {
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue
index 8c7e5f05f..d3fa2b518 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.vue
+++ b/webapp/pages/settings/my-email-address/enter-nonce.vue
@@ -17,7 +17,7 @@
           :label="$t('settings.email.labelNonce')"
         />
         <os-button variant="primary" appearance="filled" type="submit" :disabled="!!errors">
-          <template #icon><base-icon name="check" /></template>
+          <template #icon><os-icon name="check" /></template>
           {{ $t('actions.save') }}
         </os-button>
       </base-card>
@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 
 export default {
-  components: { OsButton },
+  components: { OsButton, OsIcon },
   data() {
     return {
       formSchema: {
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index 878364f11..84589003a 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/webapp/pages/settings/my-email-address/index.vue
@@ -25,7 +25,7 @@
           variant="primary"
           appearance="filled"
         >
-          <template #icon><base-icon name="check" /></template>
+          <template #icon><os-icon name="check" /></template>
           {{ $t('actions.save') }}
         </os-button>
       </base-card>
@@ -35,7 +35,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { OsButton } from '@ocelot-social/ui'
+import { OsButton, OsIcon } from '@ocelot-social/ui'
 import { AddEmailAddressMutation } from '~/graphql/EmailAddress.js'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import scrollToContent from '../scroll-to-content.js'
@@ -44,6 +44,7 @@ export default {
   mixins: [scrollToContent],
   components: {
     OsButton,
+    OsIcon,
     SweetalertIcon,
   },
   data() {
diff --git a/webapp/test/__mocks__/@ocelot-social/ui/ocelot.js b/webapp/test/__mocks__/@ocelot-social/ui/ocelot.js
new file mode 100644
index 000000000..7dfdcb533
--- /dev/null
+++ b/webapp/test/__mocks__/@ocelot-social/ui/ocelot.js
@@ -0,0 +1,82 @@
+/**
+ * Jest mock for @ocelot-social/ui/ocelot
+ *
+ * Same vue-demi patch mechanism as ui.js, but loads dist/ocelot.cjs.
+ */
+const path = require('path')
+const Module = require('module')
+
+// Load vue-demi from webapp's node_modules
+// __dirname is test/__mocks__/@ocelot-social/ui, so go up 4 levels to webapp
+const vueDemiPath = path.resolve(__dirname, '../../../../node_modules/vue-demi/lib/index.cjs')
+const vueDemi = require(vueDemiPath)
+
+// Verify vue-demi is correctly configured for Vue 2
+if (!vueDemi.isVue2) {
+  throw new Error('vue-demi is not configured for Vue 2! isVue2=' + vueDemi.isVue2)
+}
+
+// Patch missing Composition API functions from Vue.default
+// This is needed because Jest loads vue.runtime.common.js which exports under default
+const Vue = require('vue')
+const VueApi = Vue.default || Vue
+
+// List of Composition API functions that vue-demi should export
+const compositionApiFns = [
+  'defineComponent',
+  'computed',
+  'ref',
+  'reactive',
+  'watch',
+  'watchEffect',
+  'onMounted',
+  'onUnmounted',
+  'onBeforeMount',
+  'onBeforeUnmount',
+  'provide',
+  'inject',
+  'toRef',
+  'toRefs',
+  'unref',
+  'isRef',
+  'shallowRef',
+  'triggerRef',
+  'customRef',
+  'shallowReactive',
+  'shallowReadonly',
+  'readonly',
+  'toRaw',
+  'markRaw',
+  'effectScope',
+  'getCurrentScope',
+  'onScopeDispose',
+  'getCurrentInstance',
+  'h',
+  'nextTick',
+]
+
+// Patch any missing functions
+for (const fn of compositionApiFns) {
+  if (!vueDemi[fn] && VueApi[fn]) {
+    vueDemi[fn] = VueApi[fn]
+  }
+}
+
+// Patch Module._load to return the correct vue-demi when the UI library loads it
+const originalLoad = Module._load
+Module._load = function (request, parent, isMain) {
+  if (request === 'vue-demi') {
+    return vueDemi
+  }
+  return originalLoad.apply(this, arguments)
+}
+
+// Load the UI library ocelot dist
+const ocelotDistPath = path.resolve(
+  __dirname,
+  '../../../../node_modules/@ocelot-social/ui/dist/ocelot.cjs',
+)
+const ocelot = require(ocelotDistPath)
+
+// Export everything from the ocelot dist
+module.exports = ocelot