diff --git a/packages/web-components/src/icons/IconAngleUp.svg b/packages/web-components/src/icons/IconAngleUp.svg
deleted file mode 100644
index b286372a0a..0000000000
--- a/packages/web-components/src/icons/IconAngleUp.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  role="img">
-  <g fill="none" fillRule="evenodd">
-    <path d="M0 24h24V0H0z" />
-    <path fill="currentColor" d="M12 11.5l5 5 1.5-1.5L12 8.5 5.5 15 7 16.5z" />
-  </g>
-</svg>
diff --git a/packages/web-components/src/icons/IconAngleUp.ts b/packages/web-components/src/icons/IconAngleUp.ts
new file mode 100644
index 0000000000..aa4d6e6cc7
--- /dev/null
+++ b/packages/web-components/src/icons/IconAngleUp.ts
@@ -0,0 +1,45 @@
+import { LitElement, css, html, PropertyValueMap, CSSResultGroup } from 'lit';
+// eslint-disable-next-line import/extensions
+import { customElement } from 'lit/decorators.js';
+
+import classNames from '../utils/className';
+import iconStyles from './icon.scss';
+
+@customElement('hds-icon-angle-up')
+export class IconAngleUp extends LitElement {
+  size: string; // SizeType = 'm';
+
+  static readonly styles = [
+    css`
+      ${iconStyles as unknown as CSSResultGroup}
+    `,
+  ];
+
+  static get properties() {
+    return {
+      size: { type: String },
+    };
+  }
+
+  render() {
+    return html`
+      <svg
+        class="${classNames('hds-icon', 'icon', `hds-icon--size-${this.size || 'm'}`)}"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        role="img"
+      >
+        <g fill="none" fill-rule="evenodd">
+          <path d="M0 24h24V0H0z" />
+          <path fill="currentColor" d="M12 11.5l5 5 1.5-1.5L12 8.5 5.5 15 7 16.5z" />
+        </g>
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hds-icon-angle-up': IconAngleUp;
+  }
+}
diff --git a/packages/web-components/src/icons/icon.scss b/packages/web-components/src/icons/icon.scss
new file mode 100644
index 0000000000..d4098aa654
--- /dev/null
+++ b/packages/web-components/src/icons/icon.scss
@@ -0,0 +1,4 @@
+.icon {
+  composes: hds-icon from 'hds-core/lib/icons/icon.css';
+  background-color: transparent !important;
+}
diff --git a/packages/web-components/src/icons/icons.css b/packages/web-components/src/icons/icons.css
deleted file mode 100644
index 2a874bc2d0..0000000000
--- a/packages/web-components/src/icons/icons.css
+++ /dev/null
@@ -1,25 +0,0 @@
-
-.icon {
-  composes: hds-icon from 'hds-core/lib/icons/icon.css';
-  background-color: transparent;
-}
-
-.xs {
-  composes: hds-icon--size-xs from 'hds-core/lib/icons/icon.css';
-}
-
-.s {
-  composes: hds-icon--size-s from 'hds-core/lib/icons/icon.css';
-}
-
-.m {
-  composes: hds-icon--size-m from 'hds-core/lib/icons/icon.css';
-}
-
-.l {
-  composes: hds-icon--size-l from 'hds-core/lib/icons/icon.css';
-}
-
-.xl {
-  composes: hds-icon--size-xl from 'hds-core/lib/icons/icon.css';
-}
diff --git a/packages/web-components/src/icons/index.ts b/packages/web-components/src/icons/index.ts
index 7776ea735d..8129622fc4 100644
--- a/packages/web-components/src/icons/index.ts
+++ b/packages/web-components/src/icons/index.ts
@@ -1,3 +1,2 @@
-import * as x from './icons.css'
+export { IconAngleUp } from './IconAngleUp'
 
-export default x