diff --git a/.changeset/angry-terms-compete.md b/.changeset/angry-terms-compete.md
new file mode 100644
index 00000000000..bb142ec1775
--- /dev/null
+++ b/.changeset/angry-terms-compete.md
@@ -0,0 +1,9 @@
+---
+"@utrecht/icon": major
+"@utrecht/icon-css": major
+---
+
+Split `@utrecht/icon` into two packages:
+
+- `@utrecht/icon-css` for the CSS and SCSS.
+- `@utrecht/icon` for the Icon SVGs.
diff --git a/components/icon/CHANGELOG.md b/components/icon/CHANGELOG.md
index 4e10bee1a13..2315a2e4957 100644
--- a/components/icon/CHANGELOG.md
+++ b/components/icon/CHANGELOG.md
@@ -1,4 +1,4 @@
-# @utrecht/icon
+# @utrecht/icon-css
 
 ## 1.3.0
 
diff --git a/components/icon/README.md b/components/icon/README.md
index f3d9d39604b..84722bc90e2 100644
--- a/components/icon/README.md
+++ b/components/icon/README.md
@@ -1,75 +1,5 @@
 <!-- @license CC0-1.0 -->
 
-# Iconen in code
+# Icon
 
-## Iconen gebruiken als Custom Element
-
-Eén van de makkelijkste manieren om iconen te gebruiken is door ze te includen in de web component library, zodat je ze als custom element kan gebruiken. Elk icoon is beschikbaar als custom element. De naam van van het icoon (`utrecht-icon-...`) is ook de naam van het custom-element. Voorbeeld:
-
-```html
-<div>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-</div>
-```
-
-Verander de kleur van het icoon via de CSS-eigenschap `color` op een parent element of via de custom eigenschap `--utrecht-icon-color`.
-
-### `color` van de omgevings content
-
-Op onderstaande manier kan je het makkelijkst de kleur aanpassen. De kleur van de bestaande tekst zal ook op het icoon toegepast worden.
-
-```html
-<button>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-  Search
-</button>
-
-<style>
-  button {
-    background-color: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-  }
-</style>
-```
-
-### `--utrecht-icon-color` als custom icoon kleur
-
-Deze manier is handig als je een klein verschil wilt aanbrengen tussen de tekst kleur en de kleur van het icoon. Het gebruikt een CSS custom property `--utrecht-icon-color` als de kleur van het icoon.
-
-```html
-<button>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-  Search
-</button>
-
-<style>
-  button {
-    --utrecht-icon-color: rgba(255, 255, 255, 0.75);
-    background-color: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-  }
-</style>
-```
-
-### Icoon grootte aanpassen
-
-De grootte van het icoon kan aangepast worden met de `--utrecht-icon-size` CSS eigenschap:
-
-```html
-<button>
-  <utrecht-icon-loupe></utrecht-icon-loupe>
-  Search
-</button>
-
-<style>
-  button {
-    --utrecht-icon-size: 42px;
-    background-color: rgb(0, 0, 0);
-    color: rgb(255, 255, 255);
-  }
-</style>
-```
-
-## Overzicht van icons
-
-Wanneer het nodig is een overzicht te hebben van de beschikbare icons, gebruik dan als basis de meegeleverde JSON informatie in `dist/index.json`. Het bevat een array met onder andere de ID van elke icoon. Op dit moment is de naam van de custom element altijd gelijk aan de ID.
+Grafisch symbool dat visueel informatie geeft over een actie, onderwerp of status.
diff --git a/components/icon/package.json b/components/icon/package.json
index 2dfaf0a0ec3..5e80ecb18f7 100644
--- a/components/icon/package.json
+++ b/components/icon/package.json
@@ -1,30 +1,22 @@
 {
   "version": "1.3.0",
   "author": "Community for NL Design System",
-  "description": "Icons for the Municipality of Utrecht based on the NL Design System architecture",
+  "description": "Icon component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
-  "name": "@utrecht/icon",
+  "name": "@utrecht/icon-css",
   "files": [
     "dist/",
     "docs/",
-    "loader/",
+    "src/",
     "*.md"
   ],
   "main": "dist/index.css",
   "scripts": {
-    "build": "pnpm run build:css && pnpm run build:svg && pnpm run build:components",
-    "build:components": "node src/build.js $1 --prefix utrecht-icon --path ../../packages/web-component-library-stencil/src/components/generated/",
-    "build:css": "build-css-package",
-    "build:svg": "svgo --recursive --folder ./src/svg --output ./tmp/optimized-svgs --quiet",
-    "clean": "rimraf dist/ tmp/ ../../packages/web-component-library-stencil/src/generated/ ../../packages/web-component-library-stencil/src/components/generated/"
+    "build": "build-css-package",
+    "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@unicode/unicode-15.1.0": "1.5.2",
-    "jsdom": "20.0.3",
-    "lodash": "4.17.21",
-    "minimist": "1.2.8",
-    "@utrecht/build-utils-css": "workspace:*",
-    "svgo": "3.1.0"
+    "@utrecht/build-utils-css": "workspace:*"
   },
   "keywords": [
     "nl-design-system"
diff --git a/components/icon/project.json b/components/icon/project.json
index 7c7480535a2..3eed5952221 100644
--- a/components/icon/project.json
+++ b/components/icon/project.json
@@ -6,14 +6,11 @@
   "targets": {
     "build": {
       "executor": "@nrwl/workspace:run-commands",
-      "outputs": [
-        "{projectRoot}/dist",
-        "{workspaceRoot}/packages/web-component-library-stencil/src/components/generated"
-      ],
+      "outputs": ["{projectRoot}/dist"],
       "options": {
         "command": "npm run build",
         "cwd": "components/icon",
-        "outputPath": "componentss/icon/dist"
+        "outputPath": "components/icon/dist"
       },
       "dependsOn": ["^build"]
     }
diff --git a/packages/component-library-css/package.json b/packages/component-library-css/package.json
index b988a7a108d..d391738c7e4 100644
--- a/packages/component-library-css/package.json
+++ b/packages/component-library-css/package.json
@@ -68,7 +68,7 @@
     "@utrecht/heading-group-css": "workspace:*",
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
-    "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",
diff --git a/packages/component-library-css/src/index.scss b/packages/component-library-css/src/index.scss
index ea1b082bf86..2f85f77622a 100644
--- a/packages/component-library-css/src/index.scss
+++ b/packages/component-library-css/src/index.scss
@@ -63,7 +63,7 @@
 @import "~@utrecht/heading-6-css/src/index";
 @import "~@utrecht/heading-group-css/src/index";
 @import "~@utrecht/iban-data-css/src/index";
-@import "~@utrecht/icon/src/index";
+@import "~@utrecht/icon-css/src/index";
 @import "~@utrecht/img-css/src/index";
 @import "~@utrecht/index-char-nav-css/src/index";
 @import "~@utrecht/link-button-css/src/index";
diff --git a/packages/component-library-react/package.json b/packages/component-library-react/package.json
index dded5a02687..b2a9ed6f4bf 100644
--- a/packages/component-library-react/package.json
+++ b/packages/component-library-react/package.json
@@ -180,7 +180,7 @@
     "@utrecht/heading-group-css": "workspace:*",
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
-    "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",
diff --git a/packages/component-library-react/src/css-module/Icon.tsx b/packages/component-library-react/src/css-module/Icon.tsx
index 41d8befa30b..15342e4c755 100644
--- a/packages/component-library-react/src/css-module/Icon.tsx
+++ b/packages/component-library-react/src/css-module/Icon.tsx
@@ -4,7 +4,7 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-import css from '@utrecht/icon/dist/index.mjs';
+import css from '@utrecht/icon-css/dist/index.mjs';
 import { insertStyle } from './insert-style';
 insertStyle(css);
 
diff --git a/packages/icon/CHANGELOG.md b/packages/icon/CHANGELOG.md
new file mode 100644
index 00000000000..4e10bee1a13
--- /dev/null
+++ b/packages/icon/CHANGELOG.md
@@ -0,0 +1,35 @@
+# @utrecht/icon
+
+## 1.3.0
+
+### Minor Changes
+
+- 725617a: Add `tokens.mjs` and `tokens.d.mts` files to CSS packages.
+- a63d0ef: Add `iconset.mjs` and `iconset.d.mts` files.
+
+## 1.2.0
+
+### Minor Changes
+
+- 888bc9b: Added metadata for icon tokens.
+
+## 1.1.0
+
+### Minor Changes
+
+- 5e6f551: Add support for bidirectional icons: icons that adapt to `dir="ltr"` and `dir="rtl"`. The following two icons are now bidirectional icons:
+
+  - `<utrecht-icon-chevron-left></utrecht-icon-chevron-left>`
+  - `<utrecht-icon-chevron-right></utrecht-icon-chevron-right>`
+
+  This behavior can be turned off with the `direction="ltr"` attribute:
+
+  ```html
+  <utrecht-icon-chevron-left direction="ltr"></utrecht-icon-chevron-left>
+  ```
+
+## 1.0.0
+
+### Minor Changes
+
+- 62f1157: Add SCSS files to `src/` directory of CSS component packages.
diff --git a/components/icon/CONTRIBUTING.md b/packages/icon/CONTRIBUTING.md
similarity index 100%
rename from components/icon/CONTRIBUTING.md
rename to packages/icon/CONTRIBUTING.md
diff --git a/packages/icon/README.md b/packages/icon/README.md
new file mode 100644
index 00000000000..f3d9d39604b
--- /dev/null
+++ b/packages/icon/README.md
@@ -0,0 +1,75 @@
+<!-- @license CC0-1.0 -->
+
+# Iconen in code
+
+## Iconen gebruiken als Custom Element
+
+Eén van de makkelijkste manieren om iconen te gebruiken is door ze te includen in de web component library, zodat je ze als custom element kan gebruiken. Elk icoon is beschikbaar als custom element. De naam van van het icoon (`utrecht-icon-...`) is ook de naam van het custom-element. Voorbeeld:
+
+```html
+<div>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+</div>
+```
+
+Verander de kleur van het icoon via de CSS-eigenschap `color` op een parent element of via de custom eigenschap `--utrecht-icon-color`.
+
+### `color` van de omgevings content
+
+Op onderstaande manier kan je het makkelijkst de kleur aanpassen. De kleur van de bestaande tekst zal ook op het icoon toegepast worden.
+
+```html
+<button>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+  Search
+</button>
+
+<style>
+  button {
+    background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+  }
+</style>
+```
+
+### `--utrecht-icon-color` als custom icoon kleur
+
+Deze manier is handig als je een klein verschil wilt aanbrengen tussen de tekst kleur en de kleur van het icoon. Het gebruikt een CSS custom property `--utrecht-icon-color` als de kleur van het icoon.
+
+```html
+<button>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+  Search
+</button>
+
+<style>
+  button {
+    --utrecht-icon-color: rgba(255, 255, 255, 0.75);
+    background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+  }
+</style>
+```
+
+### Icoon grootte aanpassen
+
+De grootte van het icoon kan aangepast worden met de `--utrecht-icon-size` CSS eigenschap:
+
+```html
+<button>
+  <utrecht-icon-loupe></utrecht-icon-loupe>
+  Search
+</button>
+
+<style>
+  button {
+    --utrecht-icon-size: 42px;
+    background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
+  }
+</style>
+```
+
+## Overzicht van icons
+
+Wanneer het nodig is een overzicht te hebben van de beschikbare icons, gebruik dan als basis de meegeleverde JSON informatie in `dist/index.json`. Het bevat een array met onder andere de ID van elke icoon. Op dit moment is de naam van de custom element altijd gelijk aan de ID.
diff --git a/components/icon/design.md b/packages/icon/design.md
similarity index 100%
rename from components/icon/design.md
rename to packages/icon/design.md
diff --git a/components/icon/iconset.md b/packages/icon/iconset.md
similarity index 100%
rename from components/icon/iconset.md
rename to packages/icon/iconset.md
diff --git a/packages/icon/package.json b/packages/icon/package.json
new file mode 100644
index 00000000000..208d8f04091
--- /dev/null
+++ b/packages/icon/package.json
@@ -0,0 +1,42 @@
+{
+  "version": "1.3.0",
+  "author": "Community for NL Design System",
+  "description": "Icons for the Municipality of Utrecht based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@utrecht/icon",
+  "files": [
+    "dist/",
+    "docs/",
+    "loader/",
+    "*.md"
+  ],
+  "main": "dist/index.css",
+  "scripts": {
+    "build": "pnpm run build:svg && pnpm run build:components",
+    "build:components": "node src/build.js $1 --prefix utrecht-icon --path ../web-component-library-stencil/src/components/generated/",
+    "build:css": "build-css-package",
+    "build:svg": "svgo --recursive --folder ./src/svg --output ./tmp/optimized-svgs --quiet",
+    "clean": "rimraf dist/ tmp/ ../../packages/web-component-library-stencil/src/generated/ ../web-component-library-stencil/src/components/generated/"
+  },
+  "devependencies": {
+    "@utrecht/icon-css": "workspace:*"
+  },
+  "devDependencies": {
+    "@unicode/unicode-15.1.0": "1.5.2",
+    "jsdom": "20.0.3",
+    "lodash": "4.17.21",
+    "minimist": "1.2.8",
+    "svgo": "3.1.0"
+  },
+  "keywords": [
+    "nl-design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/utrecht.git",
+    "directory": "packages/icon"
+  }
+}
diff --git a/packages/icon/project.json b/packages/icon/project.json
new file mode 100644
index 00000000000..4ad49ebf9c6
--- /dev/null
+++ b/packages/icon/project.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "root": "{workspaceRoot}/packages/icon",
+  "sourceRoot": "{projectRoot}",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": [
+        "{projectRoot}/dist",
+        "{workspaceRoot}/packages/web-component-library-stencil/src/components/generated"
+      ],
+      "options": {
+        "command": "npm run build",
+        "cwd": "components/icon",
+        "outputPath": "packages/icon/dist"
+      },
+      "dependsOn": ["^build"]
+    }
+  }
+}
diff --git a/components/icon/src/build.js b/packages/icon/src/build.js
similarity index 100%
rename from components/icon/src/build.js
rename to packages/icon/src/build.js
diff --git a/components/icon/src/component_templates.js b/packages/icon/src/component_templates.js
similarity index 100%
rename from components/icon/src/component_templates.js
rename to packages/icon/src/component_templates.js
diff --git a/components/icon/src/svg/afspraak-maken.svg b/packages/icon/src/svg/afspraak-maken.svg
similarity index 100%
rename from components/icon/src/svg/afspraak-maken.svg
rename to packages/icon/src/svg/afspraak-maken.svg
diff --git a/components/icon/src/svg/afval-container.svg b/packages/icon/src/svg/afval-container.svg
similarity index 100%
rename from components/icon/src/svg/afval-container.svg
rename to packages/icon/src/svg/afval-container.svg
diff --git a/components/icon/src/svg/afval-containerpas.svg b/packages/icon/src/svg/afval-containerpas.svg
similarity index 100%
rename from components/icon/src/svg/afval-containerpas.svg
rename to packages/icon/src/svg/afval-containerpas.svg
diff --git a/components/icon/src/svg/afval-kalender.svg b/packages/icon/src/svg/afval-kalender.svg
similarity index 100%
rename from components/icon/src/svg/afval-kalender.svg
rename to packages/icon/src/svg/afval-kalender.svg
diff --git a/components/icon/src/svg/afval-pmd.svg b/packages/icon/src/svg/afval-pmd.svg
similarity index 100%
rename from components/icon/src/svg/afval-pmd.svg
rename to packages/icon/src/svg/afval-pmd.svg
diff --git a/components/icon/src/svg/afval-scheiden.svg b/packages/icon/src/svg/afval-scheiden.svg
similarity index 100%
rename from components/icon/src/svg/afval-scheiden.svg
rename to packages/icon/src/svg/afval-scheiden.svg
diff --git a/components/icon/src/svg/afval.svg b/packages/icon/src/svg/afval.svg
similarity index 100%
rename from components/icon/src/svg/afval.svg
rename to packages/icon/src/svg/afval.svg
diff --git a/components/icon/src/svg/afvalkalender.svg b/packages/icon/src/svg/afvalkalender.svg
similarity index 100%
rename from components/icon/src/svg/afvalkalender.svg
rename to packages/icon/src/svg/afvalkalender.svg
diff --git a/components/icon/src/svg/alleen.svg b/packages/icon/src/svg/alleen.svg
similarity index 100%
rename from components/icon/src/svg/alleen.svg
rename to packages/icon/src/svg/alleen.svg
diff --git a/components/icon/src/svg/arrow.svg b/packages/icon/src/svg/arrow.svg
similarity index 100%
rename from components/icon/src/svg/arrow.svg
rename to packages/icon/src/svg/arrow.svg
diff --git a/components/icon/src/svg/auto.svg b/packages/icon/src/svg/auto.svg
similarity index 100%
rename from components/icon/src/svg/auto.svg
rename to packages/icon/src/svg/auto.svg
diff --git a/components/icon/src/svg/begroting.svg b/packages/icon/src/svg/begroting.svg
similarity index 100%
rename from components/icon/src/svg/begroting.svg
rename to packages/icon/src/svg/begroting.svg
diff --git a/components/icon/src/svg/bestemmingsplan.svg b/packages/icon/src/svg/bestemmingsplan.svg
similarity index 100%
rename from components/icon/src/svg/bestemmingsplan.svg
rename to packages/icon/src/svg/bestemmingsplan.svg
diff --git a/components/icon/src/svg/betaaldatum.svg b/packages/icon/src/svg/betaaldatum.svg
similarity index 100%
rename from components/icon/src/svg/betaaldatum.svg
rename to packages/icon/src/svg/betaaldatum.svg
diff --git a/components/icon/src/svg/bewijsstukken.svg b/packages/icon/src/svg/bewijsstukken.svg
similarity index 100%
rename from components/icon/src/svg/bewijsstukken.svg
rename to packages/icon/src/svg/bewijsstukken.svg
diff --git a/components/icon/src/svg/bijstand.svg b/packages/icon/src/svg/bijstand.svg
similarity index 100%
rename from components/icon/src/svg/bijstand.svg
rename to packages/icon/src/svg/bijstand.svg
diff --git a/components/icon/src/svg/blad.svg b/packages/icon/src/svg/blad.svg
similarity index 100%
rename from components/icon/src/svg/blad.svg
rename to packages/icon/src/svg/blad.svg
diff --git a/components/icon/src/svg/bouwproject.svg b/packages/icon/src/svg/bouwproject.svg
similarity index 100%
rename from components/icon/src/svg/bouwproject.svg
rename to packages/icon/src/svg/bouwproject.svg
diff --git a/components/icon/src/svg/brandgevaar.svg b/packages/icon/src/svg/brandgevaar.svg
similarity index 100%
rename from components/icon/src/svg/brandgevaar.svg
rename to packages/icon/src/svg/brandgevaar.svg
diff --git a/components/icon/src/svg/brief-betalen.svg b/packages/icon/src/svg/brief-betalen.svg
similarity index 100%
rename from components/icon/src/svg/brief-betalen.svg
rename to packages/icon/src/svg/brief-betalen.svg
diff --git a/components/icon/src/svg/checkmark.svg b/packages/icon/src/svg/checkmark.svg
similarity index 100%
rename from components/icon/src/svg/checkmark.svg
rename to packages/icon/src/svg/checkmark.svg
diff --git a/components/icon/src/svg/chevron-down.svg b/packages/icon/src/svg/chevron-down.svg
similarity index 100%
rename from components/icon/src/svg/chevron-down.svg
rename to packages/icon/src/svg/chevron-down.svg
diff --git a/components/icon/src/svg/chevron-left.svg b/packages/icon/src/svg/chevron-left.svg
similarity index 100%
rename from components/icon/src/svg/chevron-left.svg
rename to packages/icon/src/svg/chevron-left.svg
diff --git a/components/icon/src/svg/chevron-right.svg b/packages/icon/src/svg/chevron-right.svg
similarity index 100%
rename from components/icon/src/svg/chevron-right.svg
rename to packages/icon/src/svg/chevron-right.svg
diff --git a/components/icon/src/svg/chevron-up.svg b/packages/icon/src/svg/chevron-up.svg
similarity index 100%
rename from components/icon/src/svg/chevron-up.svg
rename to packages/icon/src/svg/chevron-up.svg
diff --git a/components/icon/src/svg/close.svg b/packages/icon/src/svg/close.svg
similarity index 100%
rename from components/icon/src/svg/close.svg
rename to packages/icon/src/svg/close.svg
diff --git a/components/icon/src/svg/college-b-w.svg b/packages/icon/src/svg/college-b-w.svg
similarity index 100%
rename from components/icon/src/svg/college-b-w.svg
rename to packages/icon/src/svg/college-b-w.svg
diff --git a/components/icon/src/svg/container-bio.svg b/packages/icon/src/svg/container-bio.svg
similarity index 100%
rename from components/icon/src/svg/container-bio.svg
rename to packages/icon/src/svg/container-bio.svg
diff --git a/components/icon/src/svg/container-glas.svg b/packages/icon/src/svg/container-glas.svg
similarity index 100%
rename from components/icon/src/svg/container-glas.svg
rename to packages/icon/src/svg/container-glas.svg
diff --git a/components/icon/src/svg/container-groenafval.svg b/packages/icon/src/svg/container-groenafval.svg
similarity index 100%
rename from components/icon/src/svg/container-groenafval.svg
rename to packages/icon/src/svg/container-groenafval.svg
diff --git a/components/icon/src/svg/container-met-zak.svg b/packages/icon/src/svg/container-met-zak.svg
similarity index 100%
rename from components/icon/src/svg/container-met-zak.svg
rename to packages/icon/src/svg/container-met-zak.svg
diff --git a/components/icon/src/svg/container-papier.svg b/packages/icon/src/svg/container-papier.svg
similarity index 100%
rename from components/icon/src/svg/container-papier.svg
rename to packages/icon/src/svg/container-papier.svg
diff --git a/components/icon/src/svg/container-pmd.svg b/packages/icon/src/svg/container-pmd.svg
similarity index 100%
rename from components/icon/src/svg/container-pmd.svg
rename to packages/icon/src/svg/container-pmd.svg
diff --git a/components/icon/src/svg/container-restafval.svg b/packages/icon/src/svg/container-restafval.svg
similarity index 100%
rename from components/icon/src/svg/container-restafval.svg
rename to packages/icon/src/svg/container-restafval.svg
diff --git a/components/icon/src/svg/container-textiel.svg b/packages/icon/src/svg/container-textiel.svg
similarity index 100%
rename from components/icon/src/svg/container-textiel.svg
rename to packages/icon/src/svg/container-textiel.svg
diff --git a/components/icon/src/svg/cross.svg b/packages/icon/src/svg/cross.svg
similarity index 100%
rename from components/icon/src/svg/cross.svg
rename to packages/icon/src/svg/cross.svg
diff --git a/components/icon/src/svg/dakloos.svg b/packages/icon/src/svg/dakloos.svg
similarity index 100%
rename from components/icon/src/svg/dakloos.svg
rename to packages/icon/src/svg/dakloos.svg
diff --git a/components/icon/src/svg/dementie.svg b/packages/icon/src/svg/dementie.svg
similarity index 100%
rename from components/icon/src/svg/dementie.svg
rename to packages/icon/src/svg/dementie.svg
diff --git a/components/icon/src/svg/documenten.svg b/packages/icon/src/svg/documenten.svg
similarity index 100%
rename from components/icon/src/svg/documenten.svg
rename to packages/icon/src/svg/documenten.svg
diff --git a/components/icon/src/svg/duurzaam.svg b/packages/icon/src/svg/duurzaam.svg
similarity index 100%
rename from components/icon/src/svg/duurzaam.svg
rename to packages/icon/src/svg/duurzaam.svg
diff --git a/components/icon/src/svg/eenzaamheid.svg b/packages/icon/src/svg/eenzaamheid.svg
similarity index 100%
rename from components/icon/src/svg/eenzaamheid.svg
rename to packages/icon/src/svg/eenzaamheid.svg
diff --git a/components/icon/src/svg/eikenprocessie.svg b/packages/icon/src/svg/eikenprocessie.svg
similarity index 100%
rename from components/icon/src/svg/eikenprocessie.svg
rename to packages/icon/src/svg/eikenprocessie.svg
diff --git a/components/icon/src/svg/elektrisch-rijden.svg b/packages/icon/src/svg/elektrisch-rijden.svg
similarity index 100%
rename from components/icon/src/svg/elektrisch-rijden.svg
rename to packages/icon/src/svg/elektrisch-rijden.svg
diff --git a/components/icon/src/svg/energie-vergoeding.svg b/packages/icon/src/svg/energie-vergoeding.svg
similarity index 100%
rename from components/icon/src/svg/energie-vergoeding.svg
rename to packages/icon/src/svg/energie-vergoeding.svg
diff --git a/components/icon/src/svg/energietransitie.svg b/packages/icon/src/svg/energietransitie.svg
similarity index 100%
rename from components/icon/src/svg/energietransitie.svg
rename to packages/icon/src/svg/energietransitie.svg
diff --git a/components/icon/src/svg/error.svg b/packages/icon/src/svg/error.svg
similarity index 100%
rename from components/icon/src/svg/error.svg
rename to packages/icon/src/svg/error.svg
diff --git a/components/icon/src/svg/evenementen.svg b/packages/icon/src/svg/evenementen.svg
similarity index 100%
rename from components/icon/src/svg/evenementen.svg
rename to packages/icon/src/svg/evenementen.svg
diff --git a/components/icon/src/svg/facebook.svg b/packages/icon/src/svg/facebook.svg
similarity index 100%
rename from components/icon/src/svg/facebook.svg
rename to packages/icon/src/svg/facebook.svg
diff --git a/components/icon/src/svg/fiets.svg b/packages/icon/src/svg/fiets.svg
similarity index 100%
rename from components/icon/src/svg/fiets.svg
rename to packages/icon/src/svg/fiets.svg
diff --git a/components/icon/src/svg/filter.svg b/packages/icon/src/svg/filter.svg
similarity index 100%
rename from components/icon/src/svg/filter.svg
rename to packages/icon/src/svg/filter.svg
diff --git a/components/icon/src/svg/geboorte.svg b/packages/icon/src/svg/geboorte.svg
similarity index 100%
rename from components/icon/src/svg/geboorte.svg
rename to packages/icon/src/svg/geboorte.svg
diff --git a/components/icon/src/svg/gebruiker-centraal.svg b/packages/icon/src/svg/gebruiker-centraal.svg
similarity index 100%
rename from components/icon/src/svg/gebruiker-centraal.svg
rename to packages/icon/src/svg/gebruiker-centraal.svg
diff --git a/components/icon/src/svg/gebruiker-ingelogd.svg b/packages/icon/src/svg/gebruiker-ingelogd.svg
similarity index 100%
rename from components/icon/src/svg/gebruiker-ingelogd.svg
rename to packages/icon/src/svg/gebruiker-ingelogd.svg
diff --git a/components/icon/src/svg/gegevenswoordenboek.svg b/packages/icon/src/svg/gegevenswoordenboek.svg
similarity index 100%
rename from components/icon/src/svg/gegevenswoordenboek.svg
rename to packages/icon/src/svg/gegevenswoordenboek.svg
diff --git a/components/icon/src/svg/geluid.svg b/packages/icon/src/svg/geluid.svg
similarity index 100%
rename from components/icon/src/svg/geluid.svg
rename to packages/icon/src/svg/geluid.svg
diff --git a/components/icon/src/svg/gemeente-locatie.svg b/packages/icon/src/svg/gemeente-locatie.svg
similarity index 100%
rename from components/icon/src/svg/gemeente-locatie.svg
rename to packages/icon/src/svg/gemeente-locatie.svg
diff --git a/components/icon/src/svg/gemeenteraad.svg b/packages/icon/src/svg/gemeenteraad.svg
similarity index 100%
rename from components/icon/src/svg/gemeenteraad.svg
rename to packages/icon/src/svg/gemeenteraad.svg
diff --git a/components/icon/src/svg/gereedschap.svg b/packages/icon/src/svg/gereedschap.svg
similarity index 100%
rename from components/icon/src/svg/gereedschap.svg
rename to packages/icon/src/svg/gereedschap.svg
diff --git a/components/icon/src/svg/gezicht.svg b/packages/icon/src/svg/gezicht.svg
similarity index 100%
rename from components/icon/src/svg/gezicht.svg
rename to packages/icon/src/svg/gezicht.svg
diff --git a/components/icon/src/svg/gezin.svg b/packages/icon/src/svg/gezin.svg
similarity index 100%
rename from components/icon/src/svg/gezin.svg
rename to packages/icon/src/svg/gezin.svg
diff --git a/components/icon/src/svg/glas-afval.svg b/packages/icon/src/svg/glas-afval.svg
similarity index 100%
rename from components/icon/src/svg/glas-afval.svg
rename to packages/icon/src/svg/glas-afval.svg
diff --git a/components/icon/src/svg/glijbaan.svg b/packages/icon/src/svg/glijbaan.svg
similarity index 100%
rename from components/icon/src/svg/glijbaan.svg
rename to packages/icon/src/svg/glijbaan.svg
diff --git a/components/icon/src/svg/grafiek.svg b/packages/icon/src/svg/grafiek.svg
similarity index 100%
rename from components/icon/src/svg/grafiek.svg
rename to packages/icon/src/svg/grafiek.svg
diff --git a/components/icon/src/svg/grofvuil-ophalen.svg b/packages/icon/src/svg/grofvuil-ophalen.svg
similarity index 100%
rename from components/icon/src/svg/grofvuil-ophalen.svg
rename to packages/icon/src/svg/grofvuil-ophalen.svg
diff --git a/components/icon/src/svg/grofvuil.svg b/packages/icon/src/svg/grofvuil.svg
similarity index 100%
rename from components/icon/src/svg/grofvuil.svg
rename to packages/icon/src/svg/grofvuil.svg
diff --git a/components/icon/src/svg/hamburger-menu.svg b/packages/icon/src/svg/hamburger-menu.svg
similarity index 100%
rename from components/icon/src/svg/hamburger-menu.svg
rename to packages/icon/src/svg/hamburger-menu.svg
diff --git a/components/icon/src/svg/herdenking.svg b/packages/icon/src/svg/herdenking.svg
similarity index 100%
rename from components/icon/src/svg/herdenking.svg
rename to packages/icon/src/svg/herdenking.svg
diff --git a/components/icon/src/svg/hondenbelasting.svg b/packages/icon/src/svg/hondenbelasting.svg
similarity index 100%
rename from components/icon/src/svg/hondenbelasting.svg
rename to packages/icon/src/svg/hondenbelasting.svg
diff --git a/components/icon/src/svg/horeca.svg b/packages/icon/src/svg/horeca.svg
similarity index 100%
rename from components/icon/src/svg/horeca.svg
rename to packages/icon/src/svg/horeca.svg
diff --git a/components/icon/src/svg/horecavergunning.svg b/packages/icon/src/svg/horecavergunning.svg
similarity index 100%
rename from components/icon/src/svg/horecavergunning.svg
rename to packages/icon/src/svg/horecavergunning.svg
diff --git a/components/icon/src/svg/huis-en-omgeving.svg b/packages/icon/src/svg/huis-en-omgeving.svg
similarity index 100%
rename from components/icon/src/svg/huis-en-omgeving.svg
rename to packages/icon/src/svg/huis-en-omgeving.svg
diff --git a/components/icon/src/svg/huis.svg b/packages/icon/src/svg/huis.svg
similarity index 100%
rename from components/icon/src/svg/huis.svg
rename to packages/icon/src/svg/huis.svg
diff --git a/components/icon/src/svg/huishoudelijk-geweld.svg b/packages/icon/src/svg/huishoudelijk-geweld.svg
similarity index 100%
rename from components/icon/src/svg/huishoudelijk-geweld.svg
rename to packages/icon/src/svg/huishoudelijk-geweld.svg
diff --git a/components/icon/src/svg/hulp-huishouden.svg b/packages/icon/src/svg/hulp-huishouden.svg
similarity index 100%
rename from components/icon/src/svg/hulp-huishouden.svg
rename to packages/icon/src/svg/hulp-huishouden.svg
diff --git a/components/icon/src/svg/hulp-vervoer.svg b/packages/icon/src/svg/hulp-vervoer.svg
similarity index 100%
rename from components/icon/src/svg/hulp-vervoer.svg
rename to packages/icon/src/svg/hulp-vervoer.svg
diff --git a/components/icon/src/svg/hulp-zorg.svg b/packages/icon/src/svg/hulp-zorg.svg
similarity index 100%
rename from components/icon/src/svg/hulp-zorg.svg
rename to packages/icon/src/svg/hulp-zorg.svg
diff --git a/components/icon/src/svg/hulpmiddelen-gezin.svg b/packages/icon/src/svg/hulpmiddelen-gezin.svg
similarity index 100%
rename from components/icon/src/svg/hulpmiddelen-gezin.svg
rename to packages/icon/src/svg/hulpmiddelen-gezin.svg
diff --git a/components/icon/src/svg/hulpverlening.svg b/packages/icon/src/svg/hulpverlening.svg
similarity index 100%
rename from components/icon/src/svg/hulpverlening.svg
rename to packages/icon/src/svg/hulpverlening.svg
diff --git a/components/icon/src/svg/idee.svg b/packages/icon/src/svg/idee.svg
similarity index 100%
rename from components/icon/src/svg/idee.svg
rename to packages/icon/src/svg/idee.svg
diff --git a/components/icon/src/svg/informatie.svg b/packages/icon/src/svg/informatie.svg
similarity index 100%
rename from components/icon/src/svg/informatie.svg
rename to packages/icon/src/svg/informatie.svg
diff --git a/components/icon/src/svg/information.svg b/packages/icon/src/svg/information.svg
similarity index 100%
rename from components/icon/src/svg/information.svg
rename to packages/icon/src/svg/information.svg
diff --git a/components/icon/src/svg/innovatie.svg b/packages/icon/src/svg/innovatie.svg
similarity index 100%
rename from components/icon/src/svg/innovatie.svg
rename to packages/icon/src/svg/innovatie.svg
diff --git a/components/icon/src/svg/inspraak-inwoners.svg b/packages/icon/src/svg/inspraak-inwoners.svg
similarity index 100%
rename from components/icon/src/svg/inspraak-inwoners.svg
rename to packages/icon/src/svg/inspraak-inwoners.svg
diff --git a/components/icon/src/svg/instagram.svg b/packages/icon/src/svg/instagram.svg
similarity index 100%
rename from components/icon/src/svg/instagram.svg
rename to packages/icon/src/svg/instagram.svg
diff --git a/components/icon/src/svg/kalender.svg b/packages/icon/src/svg/kalender.svg
similarity index 100%
rename from components/icon/src/svg/kalender.svg
rename to packages/icon/src/svg/kalender.svg
diff --git a/components/icon/src/svg/kennis.svg b/packages/icon/src/svg/kennis.svg
similarity index 100%
rename from components/icon/src/svg/kennis.svg
rename to packages/icon/src/svg/kennis.svg
diff --git a/components/icon/src/svg/kerstbomen.svg b/packages/icon/src/svg/kerstbomen.svg
similarity index 100%
rename from components/icon/src/svg/kerstbomen.svg
rename to packages/icon/src/svg/kerstbomen.svg
diff --git a/components/icon/src/svg/klachten.svg b/packages/icon/src/svg/klachten.svg
similarity index 100%
rename from components/icon/src/svg/klachten.svg
rename to packages/icon/src/svg/klachten.svg
diff --git a/components/icon/src/svg/kroon.svg b/packages/icon/src/svg/kroon.svg
similarity index 100%
rename from components/icon/src/svg/kroon.svg
rename to packages/icon/src/svg/kroon.svg
diff --git a/components/icon/src/svg/laadpaal.svg b/packages/icon/src/svg/laadpaal.svg
similarity index 100%
rename from components/icon/src/svg/laadpaal.svg
rename to packages/icon/src/svg/laadpaal.svg
diff --git a/components/icon/src/svg/language.svg b/packages/icon/src/svg/language.svg
similarity index 100%
rename from components/icon/src/svg/language.svg
rename to packages/icon/src/svg/language.svg
diff --git a/components/icon/src/svg/lantaarnpaal-oud.svg b/packages/icon/src/svg/lantaarnpaal-oud.svg
similarity index 100%
rename from components/icon/src/svg/lantaarnpaal-oud.svg
rename to packages/icon/src/svg/lantaarnpaal-oud.svg
diff --git a/components/icon/src/svg/lantaarnpaal.svg b/packages/icon/src/svg/lantaarnpaal.svg
similarity index 100%
rename from components/icon/src/svg/lantaarnpaal.svg
rename to packages/icon/src/svg/lantaarnpaal.svg
diff --git a/components/icon/src/svg/leren.svg b/packages/icon/src/svg/leren.svg
similarity index 100%
rename from components/icon/src/svg/leren.svg
rename to packages/icon/src/svg/leren.svg
diff --git a/components/icon/src/svg/let-op.svg b/packages/icon/src/svg/let-op.svg
similarity index 100%
rename from components/icon/src/svg/let-op.svg
rename to packages/icon/src/svg/let-op.svg
diff --git a/components/icon/src/svg/linkedin.svg b/packages/icon/src/svg/linkedin.svg
similarity index 100%
rename from components/icon/src/svg/linkedin.svg
rename to packages/icon/src/svg/linkedin.svg
diff --git a/components/icon/src/svg/list-check.svg b/packages/icon/src/svg/list-check.svg
similarity index 100%
rename from components/icon/src/svg/list-check.svg
rename to packages/icon/src/svg/list-check.svg
diff --git a/components/icon/src/svg/list-number.svg b/packages/icon/src/svg/list-number.svg
similarity index 100%
rename from components/icon/src/svg/list-number.svg
rename to packages/icon/src/svg/list-number.svg
diff --git a/components/icon/src/svg/list.svg b/packages/icon/src/svg/list.svg
similarity index 100%
rename from components/icon/src/svg/list.svg
rename to packages/icon/src/svg/list.svg
diff --git a/components/icon/src/svg/loupe.svg b/packages/icon/src/svg/loupe.svg
similarity index 100%
rename from components/icon/src/svg/loupe.svg
rename to packages/icon/src/svg/loupe.svg
diff --git a/components/icon/src/svg/markt.svg b/packages/icon/src/svg/markt.svg
similarity index 100%
rename from components/icon/src/svg/markt.svg
rename to packages/icon/src/svg/markt.svg
diff --git a/components/icon/src/svg/melding-boom.svg b/packages/icon/src/svg/melding-boom.svg
similarity index 100%
rename from components/icon/src/svg/melding-boom.svg
rename to packages/icon/src/svg/melding-boom.svg
diff --git a/components/icon/src/svg/melding-klacht.svg b/packages/icon/src/svg/melding-klacht.svg
similarity index 100%
rename from components/icon/src/svg/melding-klacht.svg
rename to packages/icon/src/svg/melding-klacht.svg
diff --git a/components/icon/src/svg/melding-openbareruimte.svg b/packages/icon/src/svg/melding-openbareruimte.svg
similarity index 100%
rename from components/icon/src/svg/melding-openbareruimte.svg
rename to packages/icon/src/svg/melding-openbareruimte.svg
diff --git a/components/icon/src/svg/melding-verlichting.svg b/packages/icon/src/svg/melding-verlichting.svg
similarity index 100%
rename from components/icon/src/svg/melding-verlichting.svg
rename to packages/icon/src/svg/melding-verlichting.svg
diff --git a/components/icon/src/svg/melding.svg b/packages/icon/src/svg/melding.svg
similarity index 100%
rename from components/icon/src/svg/melding.svg
rename to packages/icon/src/svg/melding.svg
diff --git a/components/icon/src/svg/menselijk.svg b/packages/icon/src/svg/menselijk.svg
similarity index 100%
rename from components/icon/src/svg/menselijk.svg
rename to packages/icon/src/svg/menselijk.svg
diff --git a/components/icon/src/svg/menu-dot-open.svg b/packages/icon/src/svg/menu-dot-open.svg
similarity index 100%
rename from components/icon/src/svg/menu-dot-open.svg
rename to packages/icon/src/svg/menu-dot-open.svg
diff --git a/components/icon/src/svg/menu-dot.svg b/packages/icon/src/svg/menu-dot.svg
similarity index 100%
rename from components/icon/src/svg/menu-dot.svg
rename to packages/icon/src/svg/menu-dot.svg
diff --git a/components/icon/src/svg/meterkast.svg b/packages/icon/src/svg/meterkast.svg
similarity index 100%
rename from components/icon/src/svg/meterkast.svg
rename to packages/icon/src/svg/meterkast.svg
diff --git a/components/icon/src/svg/milieu-ontheffing.svg b/packages/icon/src/svg/milieu-ontheffing.svg
similarity index 100%
rename from components/icon/src/svg/milieu-ontheffing.svg
rename to packages/icon/src/svg/milieu-ontheffing.svg
diff --git a/components/icon/src/svg/milieu-zone.svg b/packages/icon/src/svg/milieu-zone.svg
similarity index 100%
rename from components/icon/src/svg/milieu-zone.svg
rename to packages/icon/src/svg/milieu-zone.svg
diff --git a/components/icon/src/svg/minus-vertical.svg b/packages/icon/src/svg/minus-vertical.svg
similarity index 100%
rename from components/icon/src/svg/minus-vertical.svg
rename to packages/icon/src/svg/minus-vertical.svg
diff --git a/components/icon/src/svg/minus.svg b/packages/icon/src/svg/minus.svg
similarity index 100%
rename from components/icon/src/svg/minus.svg
rename to packages/icon/src/svg/minus.svg
diff --git a/components/icon/src/svg/mobiliteit.svg b/packages/icon/src/svg/mobiliteit.svg
similarity index 100%
rename from components/icon/src/svg/mobiliteit.svg
rename to packages/icon/src/svg/mobiliteit.svg
diff --git a/components/icon/src/svg/natuur.svg b/packages/icon/src/svg/natuur.svg
similarity index 100%
rename from components/icon/src/svg/natuur.svg
rename to packages/icon/src/svg/natuur.svg
diff --git a/components/icon/src/svg/nieuw-huis.svg b/packages/icon/src/svg/nieuw-huis.svg
similarity index 100%
rename from components/icon/src/svg/nieuw-huis.svg
rename to packages/icon/src/svg/nieuw-huis.svg
diff --git a/components/icon/src/svg/nieuwsbrief.svg b/packages/icon/src/svg/nieuwsbrief.svg
similarity index 100%
rename from components/icon/src/svg/nieuwsbrief.svg
rename to packages/icon/src/svg/nieuwsbrief.svg
diff --git a/components/icon/src/svg/nummerbord.svg b/packages/icon/src/svg/nummerbord.svg
similarity index 100%
rename from components/icon/src/svg/nummerbord.svg
rename to packages/icon/src/svg/nummerbord.svg
diff --git a/components/icon/src/svg/om-het-huis.svg b/packages/icon/src/svg/om-het-huis.svg
similarity index 100%
rename from components/icon/src/svg/om-het-huis.svg
rename to packages/icon/src/svg/om-het-huis.svg
diff --git a/components/icon/src/svg/omgeving.svg b/packages/icon/src/svg/omgeving.svg
similarity index 100%
rename from components/icon/src/svg/omgeving.svg
rename to packages/icon/src/svg/omgeving.svg
diff --git a/components/icon/src/svg/omgevingsvisie.svg b/packages/icon/src/svg/omgevingsvisie.svg
similarity index 100%
rename from components/icon/src/svg/omgevingsvisie.svg
rename to packages/icon/src/svg/omgevingsvisie.svg
diff --git a/components/icon/src/svg/omgevingswet.svg b/packages/icon/src/svg/omgevingswet.svg
similarity index 100%
rename from components/icon/src/svg/omgevingswet.svg
rename to packages/icon/src/svg/omgevingswet.svg
diff --git a/components/icon/src/svg/onderhoud.svg b/packages/icon/src/svg/onderhoud.svg
similarity index 100%
rename from components/icon/src/svg/onderhoud.svg
rename to packages/icon/src/svg/onderhoud.svg
diff --git a/components/icon/src/svg/ondernemen.svg b/packages/icon/src/svg/ondernemen.svg
similarity index 100%
rename from components/icon/src/svg/ondernemen.svg
rename to packages/icon/src/svg/ondernemen.svg
diff --git a/components/icon/src/svg/openingstijden.svg b/packages/icon/src/svg/openingstijden.svg
similarity index 100%
rename from components/icon/src/svg/openingstijden.svg
rename to packages/icon/src/svg/openingstijden.svg
diff --git a/components/icon/src/svg/over-de-stad.svg b/packages/icon/src/svg/over-de-stad.svg
similarity index 100%
rename from components/icon/src/svg/over-de-stad.svg
rename to packages/icon/src/svg/over-de-stad.svg
diff --git a/components/icon/src/svg/overlijden.svg b/packages/icon/src/svg/overlijden.svg
similarity index 100%
rename from components/icon/src/svg/overlijden.svg
rename to packages/icon/src/svg/overlijden.svg
diff --git a/components/icon/src/svg/panden.svg b/packages/icon/src/svg/panden.svg
similarity index 100%
rename from components/icon/src/svg/panden.svg
rename to packages/icon/src/svg/panden.svg
diff --git a/components/icon/src/svg/park.svg b/packages/icon/src/svg/park.svg
similarity index 100%
rename from components/icon/src/svg/park.svg
rename to packages/icon/src/svg/park.svg
diff --git a/components/icon/src/svg/parkeerkaart.svg b/packages/icon/src/svg/parkeerkaart.svg
similarity index 100%
rename from components/icon/src/svg/parkeerkaart.svg
rename to packages/icon/src/svg/parkeerkaart.svg
diff --git a/components/icon/src/svg/parkeervergunning.svg b/packages/icon/src/svg/parkeervergunning.svg
similarity index 100%
rename from components/icon/src/svg/parkeervergunning.svg
rename to packages/icon/src/svg/parkeervergunning.svg
diff --git a/components/icon/src/svg/parken.svg b/packages/icon/src/svg/parken.svg
similarity index 100%
rename from components/icon/src/svg/parken.svg
rename to packages/icon/src/svg/parken.svg
diff --git a/components/icon/src/svg/parkeren-bedrijven.svg b/packages/icon/src/svg/parkeren-bedrijven.svg
similarity index 100%
rename from components/icon/src/svg/parkeren-bedrijven.svg
rename to packages/icon/src/svg/parkeren-bedrijven.svg
diff --git a/components/icon/src/svg/parkeren-betaalautomaat.svg b/packages/icon/src/svg/parkeren-betaalautomaat.svg
similarity index 100%
rename from components/icon/src/svg/parkeren-betaalautomaat.svg
rename to packages/icon/src/svg/parkeren-betaalautomaat.svg
diff --git a/components/icon/src/svg/parkeren-betalen.svg b/packages/icon/src/svg/parkeren-betalen.svg
similarity index 100%
rename from components/icon/src/svg/parkeren-betalen.svg
rename to packages/icon/src/svg/parkeren-betalen.svg
diff --git a/components/icon/src/svg/parkeren.svg b/packages/icon/src/svg/parkeren.svg
similarity index 100%
rename from components/icon/src/svg/parkeren.svg
rename to packages/icon/src/svg/parkeren.svg
diff --git a/components/icon/src/svg/participatie-campagne.svg b/packages/icon/src/svg/participatie-campagne.svg
similarity index 100%
rename from components/icon/src/svg/participatie-campagne.svg
rename to packages/icon/src/svg/participatie-campagne.svg
diff --git a/components/icon/src/svg/participatie-like.svg b/packages/icon/src/svg/participatie-like.svg
similarity index 100%
rename from components/icon/src/svg/participatie-like.svg
rename to packages/icon/src/svg/participatie-like.svg
diff --git a/components/icon/src/svg/participatie-pitch.svg b/packages/icon/src/svg/participatie-pitch.svg
similarity index 100%
rename from components/icon/src/svg/participatie-pitch.svg
rename to packages/icon/src/svg/participatie-pitch.svg
diff --git a/components/icon/src/svg/paspoort.svg b/packages/icon/src/svg/paspoort.svg
similarity index 100%
rename from components/icon/src/svg/paspoort.svg
rename to packages/icon/src/svg/paspoort.svg
diff --git a/components/icon/src/svg/presentatie.svg b/packages/icon/src/svg/presentatie.svg
similarity index 100%
rename from components/icon/src/svg/presentatie.svg
rename to packages/icon/src/svg/presentatie.svg
diff --git a/components/icon/src/svg/prijskaartje.svg b/packages/icon/src/svg/prijskaartje.svg
similarity index 100%
rename from components/icon/src/svg/prijskaartje.svg
rename to packages/icon/src/svg/prijskaartje.svg
diff --git a/components/icon/src/svg/read-aloud.svg b/packages/icon/src/svg/read-aloud.svg
similarity index 100%
rename from components/icon/src/svg/read-aloud.svg
rename to packages/icon/src/svg/read-aloud.svg
diff --git a/components/icon/src/svg/rijbewijs.svg b/packages/icon/src/svg/rijbewijs.svg
similarity index 100%
rename from components/icon/src/svg/rijbewijs.svg
rename to packages/icon/src/svg/rijbewijs.svg
diff --git a/components/icon/src/svg/rioolheffing.svg b/packages/icon/src/svg/rioolheffing.svg
similarity index 100%
rename from components/icon/src/svg/rioolheffing.svg
rename to packages/icon/src/svg/rioolheffing.svg
diff --git a/components/icon/src/svg/rolstoel.svg b/packages/icon/src/svg/rolstoel.svg
similarity index 100%
rename from components/icon/src/svg/rolstoel.svg
rename to packages/icon/src/svg/rolstoel.svg
diff --git a/components/icon/src/svg/schild-gemeente-utrecht.svg b/packages/icon/src/svg/schild-gemeente-utrecht.svg
similarity index 100%
rename from components/icon/src/svg/schild-gemeente-utrecht.svg
rename to packages/icon/src/svg/schild-gemeente-utrecht.svg
diff --git a/components/icon/src/svg/search.svg b/packages/icon/src/svg/search.svg
similarity index 100%
rename from components/icon/src/svg/search.svg
rename to packages/icon/src/svg/search.svg
diff --git a/components/icon/src/svg/shoppen.svg b/packages/icon/src/svg/shoppen.svg
similarity index 100%
rename from components/icon/src/svg/shoppen.svg
rename to packages/icon/src/svg/shoppen.svg
diff --git a/components/icon/src/svg/sinterklaas.svg b/packages/icon/src/svg/sinterklaas.svg
similarity index 100%
rename from components/icon/src/svg/sinterklaas.svg
rename to packages/icon/src/svg/sinterklaas.svg
diff --git a/components/icon/src/svg/slechtziende-hoordende.svg b/packages/icon/src/svg/slechtziende-hoordende.svg
similarity index 100%
rename from components/icon/src/svg/slechtziende-hoordende.svg
rename to packages/icon/src/svg/slechtziende-hoordende.svg
diff --git a/components/icon/src/svg/sport-en-cultuur.svg b/packages/icon/src/svg/sport-en-cultuur.svg
similarity index 100%
rename from components/icon/src/svg/sport-en-cultuur.svg
rename to packages/icon/src/svg/sport-en-cultuur.svg
diff --git a/components/icon/src/svg/sport-voetbal.svg b/packages/icon/src/svg/sport-voetbal.svg
similarity index 100%
rename from components/icon/src/svg/sport-voetbal.svg
rename to packages/icon/src/svg/sport-voetbal.svg
diff --git a/components/icon/src/svg/sport.svg b/packages/icon/src/svg/sport.svg
similarity index 100%
rename from components/icon/src/svg/sport.svg
rename to packages/icon/src/svg/sport.svg
diff --git a/components/icon/src/svg/stookverbod.svg b/packages/icon/src/svg/stookverbod.svg
similarity index 100%
rename from components/icon/src/svg/stookverbod.svg
rename to packages/icon/src/svg/stookverbod.svg
diff --git a/components/icon/src/svg/strand.svg b/packages/icon/src/svg/strand.svg
similarity index 100%
rename from components/icon/src/svg/strand.svg
rename to packages/icon/src/svg/strand.svg
diff --git a/components/icon/src/svg/strooien.svg b/packages/icon/src/svg/strooien.svg
similarity index 100%
rename from components/icon/src/svg/strooien.svg
rename to packages/icon/src/svg/strooien.svg
diff --git a/components/icon/src/svg/subsidie-gezin.svg b/packages/icon/src/svg/subsidie-gezin.svg
similarity index 100%
rename from components/icon/src/svg/subsidie-gezin.svg
rename to packages/icon/src/svg/subsidie-gezin.svg
diff --git a/components/icon/src/svg/subsidie.svg b/packages/icon/src/svg/subsidie.svg
similarity index 100%
rename from components/icon/src/svg/subsidie.svg
rename to packages/icon/src/svg/subsidie.svg
diff --git a/components/icon/src/svg/t-shirt.svg b/packages/icon/src/svg/t-shirt.svg
similarity index 100%
rename from components/icon/src/svg/t-shirt.svg
rename to packages/icon/src/svg/t-shirt.svg
diff --git a/components/icon/src/svg/thuiswerken.svg b/packages/icon/src/svg/thuiswerken.svg
similarity index 100%
rename from components/icon/src/svg/thuiswerken.svg
rename to packages/icon/src/svg/thuiswerken.svg
diff --git a/components/icon/src/svg/toeslag.svg b/packages/icon/src/svg/toeslag.svg
similarity index 100%
rename from components/icon/src/svg/toeslag.svg
rename to packages/icon/src/svg/toeslag.svg
diff --git a/components/icon/src/svg/trein.svg b/packages/icon/src/svg/trein.svg
similarity index 100%
rename from components/icon/src/svg/trein.svg
rename to packages/icon/src/svg/trein.svg
diff --git a/components/icon/src/svg/trouwen.svg b/packages/icon/src/svg/trouwen.svg
similarity index 100%
rename from components/icon/src/svg/trouwen.svg
rename to packages/icon/src/svg/trouwen.svg
diff --git a/components/icon/src/svg/twitter.svg b/packages/icon/src/svg/twitter.svg
similarity index 100%
rename from components/icon/src/svg/twitter.svg
rename to packages/icon/src/svg/twitter.svg
diff --git a/components/icon/src/svg/user.svg b/packages/icon/src/svg/user.svg
similarity index 100%
rename from components/icon/src/svg/user.svg
rename to packages/icon/src/svg/user.svg
diff --git a/components/icon/src/svg/uw-wijk.svg b/packages/icon/src/svg/uw-wijk.svg
similarity index 100%
rename from components/icon/src/svg/uw-wijk.svg
rename to packages/icon/src/svg/uw-wijk.svg
diff --git a/components/icon/src/svg/vaccinatie.svg b/packages/icon/src/svg/vaccinatie.svg
similarity index 100%
rename from components/icon/src/svg/vaccinatie.svg
rename to packages/icon/src/svg/vaccinatie.svg
diff --git a/components/icon/src/svg/veilige-wijk.svg b/packages/icon/src/svg/veilige-wijk.svg
similarity index 100%
rename from components/icon/src/svg/veilige-wijk.svg
rename to packages/icon/src/svg/veilige-wijk.svg
diff --git a/components/icon/src/svg/vergaderen.svg b/packages/icon/src/svg/vergaderen.svg
similarity index 100%
rename from components/icon/src/svg/vergaderen.svg
rename to packages/icon/src/svg/vergaderen.svg
diff --git a/components/icon/src/svg/vergaderendigitaal.svg b/packages/icon/src/svg/vergaderendigitaal.svg
similarity index 100%
rename from components/icon/src/svg/vergaderendigitaal.svg
rename to packages/icon/src/svg/vergaderendigitaal.svg
diff --git a/components/icon/src/svg/vergoeding.svg b/packages/icon/src/svg/vergoeding.svg
similarity index 100%
rename from components/icon/src/svg/vergoeding.svg
rename to packages/icon/src/svg/vergoeding.svg
diff --git a/components/icon/src/svg/verhuizen.svg b/packages/icon/src/svg/verhuizen.svg
similarity index 100%
rename from components/icon/src/svg/verhuizen.svg
rename to packages/icon/src/svg/verhuizen.svg
diff --git a/components/icon/src/svg/verkeerslicht.svg b/packages/icon/src/svg/verkeerslicht.svg
similarity index 100%
rename from components/icon/src/svg/verkeerslicht.svg
rename to packages/icon/src/svg/verkeerslicht.svg
diff --git a/components/icon/src/svg/verkiezingen.svg b/packages/icon/src/svg/verkiezingen.svg
similarity index 100%
rename from components/icon/src/svg/verkiezingen.svg
rename to packages/icon/src/svg/verkiezingen.svg
diff --git a/components/icon/src/svg/verslaving.svg b/packages/icon/src/svg/verslaving.svg
similarity index 100%
rename from components/icon/src/svg/verslaving.svg
rename to packages/icon/src/svg/verslaving.svg
diff --git a/components/icon/src/svg/vervoersvoorziening.svg b/packages/icon/src/svg/vervoersvoorziening.svg
similarity index 100%
rename from components/icon/src/svg/vervoersvoorziening.svg
rename to packages/icon/src/svg/vervoersvoorziening.svg
diff --git a/components/icon/src/svg/virus.svg b/packages/icon/src/svg/virus.svg
similarity index 100%
rename from components/icon/src/svg/virus.svg
rename to packages/icon/src/svg/virus.svg
diff --git a/components/icon/src/svg/vluchtelingen.svg b/packages/icon/src/svg/vluchtelingen.svg
similarity index 100%
rename from components/icon/src/svg/vluchtelingen.svg
rename to packages/icon/src/svg/vluchtelingen.svg
diff --git a/components/icon/src/svg/voorzieningen-vervoer.svg b/packages/icon/src/svg/voorzieningen-vervoer.svg
similarity index 100%
rename from components/icon/src/svg/voorzieningen-vervoer.svg
rename to packages/icon/src/svg/voorzieningen-vervoer.svg
diff --git a/components/icon/src/svg/vrijwilligerswerk.svg b/packages/icon/src/svg/vrijwilligerswerk.svg
similarity index 100%
rename from components/icon/src/svg/vrijwilligerswerk.svg
rename to packages/icon/src/svg/vrijwilligerswerk.svg
diff --git a/components/icon/src/svg/vuilnisbak.svg b/packages/icon/src/svg/vuilnisbak.svg
similarity index 100%
rename from components/icon/src/svg/vuilnisbak.svg
rename to packages/icon/src/svg/vuilnisbak.svg
diff --git a/components/icon/src/svg/vuilniszak.svg b/packages/icon/src/svg/vuilniszak.svg
similarity index 100%
rename from components/icon/src/svg/vuilniszak.svg
rename to packages/icon/src/svg/vuilniszak.svg
diff --git a/components/icon/src/svg/vuurwerk.svg b/packages/icon/src/svg/vuurwerk.svg
similarity index 100%
rename from components/icon/src/svg/vuurwerk.svg
rename to packages/icon/src/svg/vuurwerk.svg
diff --git a/components/icon/src/svg/wandelstok.svg b/packages/icon/src/svg/wandelstok.svg
similarity index 100%
rename from components/icon/src/svg/wandelstok.svg
rename to packages/icon/src/svg/wandelstok.svg
diff --git a/components/icon/src/svg/warm.svg b/packages/icon/src/svg/warm.svg
similarity index 100%
rename from components/icon/src/svg/warm.svg
rename to packages/icon/src/svg/warm.svg
diff --git a/components/icon/src/svg/warning.svg b/packages/icon/src/svg/warning.svg
similarity index 100%
rename from components/icon/src/svg/warning.svg
rename to packages/icon/src/svg/warning.svg
diff --git a/components/icon/src/svg/werken.svg b/packages/icon/src/svg/werken.svg
similarity index 100%
rename from components/icon/src/svg/werken.svg
rename to packages/icon/src/svg/werken.svg
diff --git a/components/icon/src/svg/werkzaamheden.svg b/packages/icon/src/svg/werkzaamheden.svg
similarity index 100%
rename from components/icon/src/svg/werkzaamheden.svg
rename to packages/icon/src/svg/werkzaamheden.svg
diff --git a/components/icon/src/svg/whatsapp.svg b/packages/icon/src/svg/whatsapp.svg
similarity index 100%
rename from components/icon/src/svg/whatsapp.svg
rename to packages/icon/src/svg/whatsapp.svg
diff --git a/components/icon/src/svg/wonen-kosten.svg b/packages/icon/src/svg/wonen-kosten.svg
similarity index 100%
rename from components/icon/src/svg/wonen-kosten.svg
rename to packages/icon/src/svg/wonen-kosten.svg
diff --git a/components/icon/src/svg/woning-zoeken.svg b/packages/icon/src/svg/woning-zoeken.svg
similarity index 100%
rename from components/icon/src/svg/woning-zoeken.svg
rename to packages/icon/src/svg/woning-zoeken.svg
diff --git a/components/icon/src/svg/x.svg b/packages/icon/src/svg/x.svg
similarity index 100%
rename from components/icon/src/svg/x.svg
rename to packages/icon/src/svg/x.svg
diff --git a/components/icon/src/svg/youtube.svg b/packages/icon/src/svg/youtube.svg
similarity index 100%
rename from components/icon/src/svg/youtube.svg
rename to packages/icon/src/svg/youtube.svg
diff --git a/components/icon/src/svg/zelfstandig-wonen.svg b/packages/icon/src/svg/zelfstandig-wonen.svg
similarity index 100%
rename from components/icon/src/svg/zelfstandig-wonen.svg
rename to packages/icon/src/svg/zelfstandig-wonen.svg
diff --git a/components/icon/src/svg/zoom-minus.svg b/packages/icon/src/svg/zoom-minus.svg
similarity index 100%
rename from components/icon/src/svg/zoom-minus.svg
rename to packages/icon/src/svg/zoom-minus.svg
diff --git a/components/icon/src/svg/zoom-plus.svg b/packages/icon/src/svg/zoom-plus.svg
similarity index 100%
rename from components/icon/src/svg/zoom-plus.svg
rename to packages/icon/src/svg/zoom-plus.svg
diff --git a/components/icon/src/svg/zoomin.svg b/packages/icon/src/svg/zoomin.svg
similarity index 100%
rename from components/icon/src/svg/zoomin.svg
rename to packages/icon/src/svg/zoomin.svg
diff --git a/components/icon/src/svg/zoomout.svg b/packages/icon/src/svg/zoomout.svg
similarity index 100%
rename from components/icon/src/svg/zoomout.svg
rename to packages/icon/src/svg/zoomout.svg
diff --git a/components/icon/src/svg/zorg-huis.svg b/packages/icon/src/svg/zorg-huis.svg
similarity index 100%
rename from components/icon/src/svg/zorg-huis.svg
rename to packages/icon/src/svg/zorg-huis.svg
diff --git a/components/icon/src/svg/zweefpaal.svg b/packages/icon/src/svg/zweefpaal.svg
similarity index 100%
rename from components/icon/src/svg/zweefpaal.svg
rename to packages/icon/src/svg/zweefpaal.svg
diff --git a/components/icon/src/svg/zwemmen.svg b/packages/icon/src/svg/zwemmen.svg
similarity index 100%
rename from components/icon/src/svg/zwemmen.svg
rename to packages/icon/src/svg/zwemmen.svg
diff --git a/components/icon/svgo.config.mjs b/packages/icon/svgo.config.mjs
similarity index 100%
rename from components/icon/svgo.config.mjs
rename to packages/icon/svgo.config.mjs
diff --git a/components/icon/unicode-bidi.en.md b/packages/icon/unicode-bidi.en.md
similarity index 100%
rename from components/icon/unicode-bidi.en.md
rename to packages/icon/unicode-bidi.en.md
diff --git a/components/icon/unicode-bidi.nl.md b/packages/icon/unicode-bidi.nl.md
similarity index 100%
rename from components/icon/unicode-bidi.nl.md
rename to packages/icon/unicode-bidi.nl.md
diff --git a/packages/storybook-css/package.json b/packages/storybook-css/package.json
index c26e4681faa..4d01ac92b1c 100644
--- a/packages/storybook-css/package.json
+++ b/packages/storybook-css/package.json
@@ -93,6 +93,7 @@
     "@utrecht/heading-group-css": "workspace:*",
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",
diff --git a/packages/storybook-css/src/Icon.stories.tsx b/packages/storybook-css/src/Icon.stories.tsx
index 4eb3853f16a..e84e54cb37e 100644
--- a/packages/storybook-css/src/Icon.stories.tsx
+++ b/packages/storybook-css/src/Icon.stories.tsx
@@ -3,8 +3,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Icon } from '@utrecht/component-library-react';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import readme from '@utrecht/icon/README.md?raw';
 import tokensDefinition from '@utrecht/icon/src/tokens.json';
+import readme from '@utrecht/icon-css/README.md?raw';
 import React from 'react';
 // import { Icon } from '@utrecht/component-library-react';
 import { designTokenStory } from './design-token-story';
diff --git a/packages/storybook-react/package.json b/packages/storybook-react/package.json
index 069e10439cc..bedf49a597a 100644
--- a/packages/storybook-react/package.json
+++ b/packages/storybook-react/package.json
@@ -107,6 +107,7 @@
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
     "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/img-css": "workspace:*",
     "@utrecht/index-char-nav-css": "workspace:*",
     "@utrecht/link-css": "workspace:*",
diff --git a/packages/storybook-react/src/stories/Icon.stories.tsx b/packages/storybook-react/src/stories/Icon.stories.tsx
index 5a6e8f61e80..dae8030f193 100644
--- a/packages/storybook-react/src/stories/Icon.stories.tsx
+++ b/packages/storybook-react/src/stories/Icon.stories.tsx
@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Icon } from '@utrecht/component-library-react/dist/css-module';
 import tokens from '@utrecht/design-tokens/dist/list.mjs';
-import readme from '@utrecht/icon/README.md?raw';
-import tokensDefinition from '@utrecht/icon/src/tokens.json';
+import readme from '@utrecht/icon-css/README.md?raw';
+import tokensDefinition from '@utrecht/icon-css/src/tokens.json';
 import React from 'react';
 import { designTokenStory } from './util.js';
 
diff --git a/packages/storybook-web-component/package.json b/packages/storybook-web-component/package.json
index 13d67b57dfb..915cd5441cb 100644
--- a/packages/storybook-web-component/package.json
+++ b/packages/storybook-web-component/package.json
@@ -85,6 +85,7 @@
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
     "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",
     "@utrecht/link-css": "workspace:*",
     "@utrecht/map-marker-css": "workspace:*",
diff --git a/packages/storybook-web-component/src/Icon.stories.tsx b/packages/storybook-web-component/src/Icon.stories.tsx
index 3f96dd9bdca..62e34716191 100644
--- a/packages/storybook-web-component/src/Icon.stories.tsx
+++ b/packages/storybook-web-component/src/Icon.stories.tsx
@@ -2,9 +2,9 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import readme from '@utrecht/icon/README.md?raw';
 import iconSet from '@utrecht/icon/dist/index.json';
-import tokensDefinition from '@utrecht/icon/src/tokens.json';
+import readme from '@utrecht/icon-css/README.md?raw';
+import tokensDefinition from '@utrecht/icon-css/src/tokens.json';
 import React from 'react';
 import { designTokenStory } from './design-token-story';
 
diff --git a/packages/storybook-web-component/src/Iconset.stories.tsx b/packages/storybook-web-component/src/Iconset.stories.tsx
index 699b296af35..7d3eff9c609 100644
--- a/packages/storybook-web-component/src/Iconset.stories.tsx
+++ b/packages/storybook-web-component/src/Iconset.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import tokens from '@utrecht/design-tokens/dist/index.json';
 import iconSet from '@utrecht/icon/dist/index.json';
 import readme from '@utrecht/icon/iconset.md?raw';
-import tokensDefinition from '@utrecht/icon/src/tokens.json';
+import tokensDefinition from '@utrecht/icon-css/src/tokens.json';
 import React from 'react';
 import { designTokenStory } from './design-token-story';
 
diff --git a/packages/web-component-library-stencil/package.json b/packages/web-component-library-stencil/package.json
index acee481069f..c9d6d6005f5 100644
--- a/packages/web-component-library-stencil/package.json
+++ b/packages/web-component-library-stencil/package.json
@@ -79,6 +79,7 @@
     "@utrecht/html-content-css": "workspace:*",
     "@utrecht/iban-data-css": "workspace:*",
     "@utrecht/icon": "workspace:*",
+    "@utrecht/icon-css": "workspace:*",
     "@utrecht/link-button-css": "workspace:*",
     "@utrecht/link-css": "workspace:*",
     "@utrecht/logo-button-css": "workspace:*",
diff --git a/packages/web-component-library-stencil/src/components/digid-logo.scss b/packages/web-component-library-stencil/src/components/digid-logo.scss
index 0c4c0b208e7..447951f21ce 100644
--- a/packages/web-component-library-stencil/src/components/digid-logo.scss
+++ b/packages/web-component-library-stencil/src/components/digid-logo.scss
@@ -3,7 +3,7 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-@import "~@utrecht/icon/src";
+@import "~@utrecht/icon-css/src";
 
 @mixin utrecht-black-icon--media-query-forced-colors {
   /* A black icon can become invisible on a forced black background.
diff --git a/packages/web-component-library-stencil/src/components/eherkenning-logo.scss b/packages/web-component-library-stencil/src/components/eherkenning-logo.scss
index d43db2a4ac1..c52c76c2e59 100644
--- a/packages/web-component-library-stencil/src/components/eherkenning-logo.scss
+++ b/packages/web-component-library-stencil/src/components/eherkenning-logo.scss
@@ -4,7 +4,7 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-@import "~@utrecht/icon/src";
+@import "~@utrecht/icon-css/src";
 
 :host {
   display: inline;
diff --git a/packages/web-component-library-stencil/src/components/eidas-logo.scss b/packages/web-component-library-stencil/src/components/eidas-logo.scss
index d43db2a4ac1..c52c76c2e59 100644
--- a/packages/web-component-library-stencil/src/components/eidas-logo.scss
+++ b/packages/web-component-library-stencil/src/components/eidas-logo.scss
@@ -4,7 +4,7 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-@import "~@utrecht/icon/src";
+@import "~@utrecht/icon-css/src";
 
 :host {
   display: inline;
diff --git a/packages/web-component-library-stencil/src/components/icon.scss b/packages/web-component-library-stencil/src/components/icon.scss
index e086e435471..eb2b0b5f2c3 100644
--- a/packages/web-component-library-stencil/src/components/icon.scss
+++ b/packages/web-component-library-stencil/src/components/icon.scss
@@ -4,7 +4,7 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-@import "~@utrecht/icon/src/mixin";
+@import "~@utrecht/icon-css/src/mixin";
 
 :host {
   @include utrecht-icon;
diff --git a/packages/web-component-library-stencil/src/components/icon/generated.scss b/packages/web-component-library-stencil/src/components/icon/generated.scss
index 7576e83be32..ca12a278326 100644
--- a/packages/web-component-library-stencil/src/components/icon/generated.scss
+++ b/packages/web-component-library-stencil/src/components/icon/generated.scss
@@ -4,7 +4,7 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-@import "~@utrecht/icon/src/mixin";
+@import "~@utrecht/icon-css/src/mixin";
 
 :host {
   @include utrecht-icon;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0df9c148f0..fdd023002a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -590,24 +590,9 @@ importers:
 
   components/icon:
     devDependencies:
-      '@unicode/unicode-15.1.0':
-        specifier: 1.5.2
-        version: 1.5.2
       '@utrecht/build-utils-css':
         specifier: workspace:*
         version: link:../../packages/build-utils-css
-      jsdom:
-        specifier: 20.0.3
-        version: 20.0.3
-      lodash:
-        specifier: 4.17.21
-        version: 4.17.21
-      minimist:
-        specifier: 1.2.8
-        version: 1.2.8
-      svgo:
-        specifier: 3.1.0
-        version: 3.1.0
 
   components/img:
     devDependencies:
@@ -1365,7 +1350,7 @@ importers:
       '@utrecht/iban-data-css':
         specifier: workspace:*
         version: link:../../components/iban-data
-      '@utrecht/icon':
+      '@utrecht/icon-css':
         specifier: workspace:*
         version: link:../../components/icon
       '@utrecht/img-css':
@@ -1834,7 +1819,7 @@ importers:
       '@utrecht/iban-data-css':
         specifier: workspace:*
         version: link:../../components/iban-data
-      '@utrecht/icon':
+      '@utrecht/icon-css':
         specifier: workspace:*
         version: link:../../components/icon
       '@utrecht/img-css':
@@ -3873,6 +3858,24 @@ importers:
         specifier: 17.7.2
         version: 17.7.2
 
+  packages/icon:
+    devDependencies:
+      '@unicode/unicode-15.1.0':
+        specifier: 1.5.2
+        version: 1.5.2
+      jsdom:
+        specifier: 20.0.3
+        version: 20.0.3
+      lodash:
+        specifier: 4.17.21
+        version: 4.17.21
+      minimist:
+        specifier: 1.2.8
+        version: 1.2.8
+      svgo:
+        specifier: 3.1.0
+        version: 3.1.0
+
   packages/storybook:
     devDependencies:
       '@babel/core':
@@ -3982,7 +3985,7 @@ importers:
         version: link:../../documentation
       '@utrecht/icon':
         specifier: workspace:*
-        version: link:../../components/icon
+        version: link:../icon
       '@utrecht/storybook-helpers':
         specifier: workspace:*
         version: link:../storybook-helpers
@@ -4476,6 +4479,9 @@ importers:
         specifier: workspace:*
         version: link:../../components/html-content
       '@utrecht/icon':
+        specifier: workspace:*
+        version: link:../icon
+      '@utrecht/icon-css':
         specifier: workspace:*
         version: link:../../components/icon
       '@utrecht/img-css':
@@ -4864,7 +4870,7 @@ importers:
         version: link:../../components/heading-6
       '@utrecht/icon':
         specifier: workspace:*
-        version: link:../../components/icon
+        version: link:../icon
       '@utrecht/link-css':
         specifier: workspace:*
         version: link:../../components/link
@@ -5427,6 +5433,9 @@ importers:
         specifier: workspace:*
         version: link:../../components/iban-data
       '@utrecht/icon':
+        specifier: workspace:*
+        version: link:../icon
+      '@utrecht/icon-css':
         specifier: workspace:*
         version: link:../../components/icon
       '@utrecht/img-css':
@@ -6069,6 +6078,9 @@ importers:
         specifier: workspace:*
         version: link:../../components/iban-data
       '@utrecht/icon':
+        specifier: workspace:*
+        version: link:../icon
+      '@utrecht/icon-css':
         specifier: workspace:*
         version: link:../../components/icon
       '@utrecht/link-button-css':
@@ -6352,6 +6364,9 @@ importers:
       '@stencil/core':
         specifier: 4.18.3
         version: 4.18.3(patch_hash=2uvgqe4jn7qcxz7vmflpioblbi)
+      '@utrecht/icon-css':
+        specifier: workspace:*
+        version: link:../../components/icon
     devDependencies:
       '@gemeente-denhaag/process-steps':
         specifier: 0.1.0-alpha.224
@@ -6508,7 +6523,7 @@ importers:
         version: link:../../components/iban-data
       '@utrecht/icon':
         specifier: workspace:*
-        version: link:../../components/icon
+        version: link:../icon
       '@utrecht/link-button-css':
         specifier: workspace:*
         version: link:../../components/link-button
@@ -20048,9 +20063,6 @@ packages:
   physical-cpu-count@2.0.0:
     resolution: {integrity: sha512-rxJOljMuWtYlvREBmd6TZYanfcPhNUKtGDZBjBBS8WG1dpN2iwPsRJZgQqN/OtJuiQckdRFOfzogqJClTrsi7g==}
 
-  picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-
   picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
 
@@ -23877,8 +23889,8 @@ packages:
   vue-component-type-helpers@1.8.25:
     resolution: {integrity: sha512-NCA6sekiJIMnMs4DdORxATXD+/NRkQpS32UC+I1KQJUasx+Z7MZUb3Y+MsKsFmX+PgyTYSteb73JW77AibaCCw==}
 
-  vue-component-type-helpers@2.1.10:
-    resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==}
+  vue-component-type-helpers@2.2.0:
+    resolution: {integrity: sha512-cYrAnv2me7bPDcg9kIcGwjJiSB6Qyi08+jLDo9yuvoFQjzHiPTzML7RnkJB1+3P6KMsX/KbCD4QE3Tv/knEllw==}
 
   vue-docgen-api@4.75.1:
     resolution: {integrity: sha512-MECZ3uExz+ssmhD/2XrFoQQs93y17IVO1KDYTp8nr6i9GNrk67AAto6QAtilW1H/pTDPMkQxJ7w/25ZIqVtfAA==}
@@ -33965,7 +33977,7 @@ snapshots:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.3.11(typescript@4.9.5)
-      vue-component-type-helpers: 2.1.10
+      vue-component-type-helpers: 2.2.0
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -35793,7 +35805,7 @@ snapshots:
       caniuse-lite: 1.0.30001636
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.1
+      picocolors: 1.1.1
       postcss: 8.4.31
       postcss-value-parser: 4.2.0
 
@@ -41059,7 +41071,7 @@ snapshots:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -45602,8 +45614,6 @@ snapshots:
 
   physical-cpu-count@2.0.0: {}
 
-  picocolors@1.0.0: {}
-
   picocolors@1.0.1: {}
 
   picocolors@1.1.1: {}
@@ -48893,7 +48903,7 @@ snapshots:
       css-tree: 2.3.1
       css-what: 6.1.0
       csso: 5.0.5
-      picocolors: 1.0.0
+      picocolors: 1.1.1
 
   svgo@3.3.2:
     dependencies:
@@ -50489,7 +50499,7 @@ snapshots:
 
   vue-component-type-helpers@1.8.25: {}
 
-  vue-component-type-helpers@2.1.10: {}
+  vue-component-type-helpers@2.2.0: {}
 
   vue-docgen-api@4.75.1(vue@3.3.11(typescript@4.9.5)):
     dependencies:
@@ -50597,7 +50607,7 @@ snapshots:
       html-escaper: 2.0.2
       is-plain-object: 5.0.0
       opener: 1.5.2
-      picocolors: 1.0.1
+      picocolors: 1.1.1
       sirv: 2.0.3
       ws: 7.5.9
     transitivePeerDependencies: