@lukso/web-components 1.6.0 → 1.6.1

package/src/docs/icons.stories.mdx

@@ -0,0 +1,1590 @@
+import { Meta, IconGallery, IconItem } from '@storybook/addon-docs'
+import '../components/lukso-icon/index'
+
+<h1>Icons Showcase</h1>
+
+Please check `lukso-icon` to learn how use icons.
+
+<Meta title="Design System/Icons" />
+
+### **Utility**
+
+<div class="pt-4">
+  <IconGallery>
+    <IconItem name="add-photo">
+      <lukso-icon name="add-photo" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-down-lg">
+      <lukso-icon name="arrow-down-lg" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-down-sm">
+      <lukso-icon name="arrow-down-sm" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-left-lg">
+      <lukso-icon name="arrow-left-lg" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-left-sm">
+      <lukso-icon name="arrow-left-sm" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-right-lg">
+      <lukso-icon name="arrow-right-lg" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-right-sm">
+      <lukso-icon name="arrow-right-sm" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-up-lg">
+      <lukso-icon name="arrow-up-lg" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="arrow-up-sm">
+      <lukso-icon name="arrow-up-sm" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="barbell-outline">
+      <lukso-icon name="barbell-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="bulb-outline">
+      <lukso-icon name="bulb-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="camera">
+      <lukso-icon name="camera" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="clipboard">
+      <lukso-icon name="clipboard" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="clock">
+      <lukso-icon name="clock" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="close-lg">
+      <lukso-icon name="close-lg" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="close-sm">
+      <lukso-icon name="close-sm" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="cloud">
+      <lukso-icon name="cloud" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="compass-outline">
+      <lukso-icon name="compass-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="complete-filled">
+      <lukso-icon
+        name="complete-filled"
+        size="medium"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </IconItem>
+    <IconItem name="complete-outline">
+      <lukso-icon name="complete-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="connect">
+      <lukso-icon name="connect" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="connections">
+      <lukso-icon name="connections" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="contract-lock">
+      <lukso-icon name="contract-lock" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="controller">
+      <lukso-icon name="controller" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="copy">
+      <lukso-icon name="copy" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="cross-outline">
+      <lukso-icon name="cross-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="dots">
+      <lukso-icon name="dots" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="edit">
+      <lukso-icon name="edit" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="error">
+      <lukso-icon name="error" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="expand">
+      <lukso-icon name="expand" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="extension">
+      <lukso-icon name="extension" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="eye-hide">
+      <lukso-icon name="eye-hide" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="eye-show">
+      <lukso-icon name="eye-show" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="filter">
+      <lukso-icon name="filter" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="fish-outline">
+      <lukso-icon name="fish-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="flip">
+      <lukso-icon name="flip" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="globe">
+      <lukso-icon name="globe" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="hamburger">
+      <lukso-icon name="hamburger" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="infinite">
+      <lukso-icon name="infinite" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="information">
+      <lukso-icon name="information" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="key-outline">
+      <lukso-icon name="key-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="link">
+      <lukso-icon name="link" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="link-1">
+      <lukso-icon name="link-1" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="link-2">
+      <lukso-icon
+        name="link-2"
+        size="medium"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </IconItem>
+    <IconItem name="link-3">
+      <lukso-icon name="link-3" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="link-4">
+      <lukso-icon
+        name="link-4"
+        size="medium"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </IconItem>
+    <IconItem name="loading">
+      <lukso-icon name="loading" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="location">
+      <lukso-icon name="location" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="locked">
+      <lukso-icon name="locked" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="login">
+      <lukso-icon name="login" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="login-2">
+      <lukso-icon name="login-2" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="login-3">
+      <lukso-icon name="login-3" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="logo-chrome">
+      <lukso-icon name="logo-chrome" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="mail">
+      <lukso-icon name="mail" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="menu-1">
+      <lukso-icon name="menu-1" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="menu-2">
+      <lukso-icon name="menu-2" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="migrate">
+      <lukso-icon name="migrate" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="minimize">
+      <lukso-icon name="minimize" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="network">
+      <lukso-icon name="network" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="notifications">
+      <lukso-icon name="notifications" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="phone-portrait-outline">
+      <lukso-icon name="phone-portrait-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="pin">
+      <lukso-icon name="pin" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="play-filled">
+      <lukso-icon name="play-filled" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="play-outline">
+      <lukso-icon name="play-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="plus">
+      <lukso-icon name="plus" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="profile-add">
+      <lukso-icon name="profile-add" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="profile-export">
+      <lukso-icon name="profile-export" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="profile-import">
+      <lukso-icon name="profile-import" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="profile-recovery">
+      <lukso-icon name="profile-recovery" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="profile-recovery-2">
+      <lukso-icon
+        name="profile-recovery-2"
+        size="medium"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </IconItem>
+    <IconItem name="profile-restore">
+      <lukso-icon name="profile-restore" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="profile">
+      <lukso-icon name="profile" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="qr-code">
+      <lukso-icon
+        name="qr-code"
+        size="medium"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </IconItem>
+    <IconItem name="relayer">
+      <lukso-icon name="relayer" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="reload">
+      <lukso-icon name="reload" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="return-down">
+      <lukso-icon name="return-down" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="return-left">
+      <lukso-icon name="return-left" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="return-right">
+      <lukso-icon name="return-right" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="return-up">
+      <lukso-icon name="return-up" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="search">
+      <lukso-icon name="search" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="settings">
+      <lukso-icon name="settings" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="smart-contract-doc">
+      <lukso-icon name="smart-contract-doc" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="smart-contract">
+      <lukso-icon name="smart-contract" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="star-filled">
+      <lukso-icon name="star-filled" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="star-outline">
+      <lukso-icon name="star-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="step-dot">
+      <lukso-icon
+        name="step-dot"
+        size="medium"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </IconItem>
+    <IconItem name="step-progress">
+      <lukso-icon
+        name="step-progress"
+        size="medium"
+        secondary-color="neutral-100"
+      ></lukso-icon>
+    </IconItem>
+    <IconItem name="steps">
+      <lukso-icon name="steps" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="tick">
+      <lukso-icon name="tick" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="timer-outline">
+      <lukso-icon name="timer-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="transaction-receive">
+      <lukso-icon name="transaction-receive" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="transaction-send">
+      <lukso-icon name="transaction-send" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="transfer">
+      <lukso-icon name="transfer" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="trash">
+      <lukso-icon name="trash" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="turn-down">
+      <lukso-icon name="turn-down" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="turn-left">
+      <lukso-icon name="turn-left" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="turn-right">
+      <lukso-icon name="turn-right" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="turn-up">
+      <lukso-icon name="turn-up" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="unlocked">
+      <lukso-icon name="unlocked" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="wallet-outline">
+      <lukso-icon name="wallet-outline" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="warning-round">
+      <lukso-icon name="warning-round" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="warning-triangle">
+      <lukso-icon name="warning-triangle" size="medium"></lukso-icon>
+    </IconItem>
+  </IconGallery>
+</div>
+
+### **Colored icons**
+
+<div class="pt-4">
+  <IconGallery>
+    <IconItem name="google-color">
+      <lukso-icon name="google-color" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="lyx-logo">
+      <lukso-icon name="lyx-logo" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="eth-logo">
+      <lukso-icon name="eth-logo" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="progress-complete">
+      <lukso-icon name="progress-complete" size="medium"></lukso-icon>
+    </IconItem>
+  </IconGallery>
+</div>
+
+### **Animated icons**
+
+<div class="pt-4">
+  <IconGallery>
+    <IconItem name="progress-indicator">
+      <lukso-icon name="progress-indicator" size="medium"></lukso-icon>
+    </IconItem>
+    <IconItem name="pulse-dot">
+      <lukso-icon name="pulse-dot"></lukso-icon>
+    </IconItem>
+    <IconItem name="complete-filled-fade-in">
+      <lukso-icon name="complete-filled-fade-in"></lukso-icon>
+    </IconItem>
+  </IconGallery>
+</div>
+
+### **Sizes**
+
+Icons support four different sizes: `small`, `medium`, `large` and `x-large`.
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `add-photo`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="add-photo" size="small"></lukso-icon>
+    <lukso-icon name="add-photo" size="medium"></lukso-icon>
+    <lukso-icon name="add-photo" size="large"></lukso-icon>
+    <lukso-icon name="add-photo" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-down-lg`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-down-lg" size="small"></lukso-icon>
+    <lukso-icon name="arrow-down-lg" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-down-lg" size="large"></lukso-icon>
+    <lukso-icon name="arrow-down-lg" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-down-sm`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-down-sm" size="small"></lukso-icon>
+    <lukso-icon name="arrow-down-sm" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-down-sm" size="large"></lukso-icon>
+    <lukso-icon name="arrow-down-sm" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-left-lg`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-left-lg" size="small"></lukso-icon>
+    <lukso-icon name="arrow-left-lg" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-left-lg" size="large"></lukso-icon>
+    <lukso-icon name="arrow-left-lg" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-left-sm`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-left-sm" size="small"></lukso-icon>
+    <lukso-icon name="arrow-left-sm" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-left-sm" size="large"></lukso-icon>
+    <lukso-icon name="arrow-left-sm" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-right-lg`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-right-lg" size="small"></lukso-icon>
+    <lukso-icon name="arrow-right-lg" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-right-lg" size="large"></lukso-icon>
+    <lukso-icon name="arrow-right-lg" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-right-sm`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-right-sm" size="small"></lukso-icon>
+    <lukso-icon name="arrow-right-sm" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-right-sm" size="large"></lukso-icon>
+    <lukso-icon name="arrow-right-sm" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-up-lg`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-up-lg" size="small"></lukso-icon>
+    <lukso-icon name="arrow-up-lg" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-up-lg" size="large"></lukso-icon>
+    <lukso-icon name="arrow-up-lg" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `arrow-up-sm`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="arrow-up-sm" size="small"></lukso-icon>
+    <lukso-icon name="arrow-up-sm" size="medium"></lukso-icon>
+    <lukso-icon name="arrow-up-sm" size="large"></lukso-icon>
+    <lukso-icon name="arrow-up-sm" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `barbell-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="barbell-outline" size="small"></lukso-icon>
+    <lukso-icon name="barbell-outline" size="medium"></lukso-icon>
+    <lukso-icon name="barbell-outline" size="large"></lukso-icon>
+    <lukso-icon name="barbell-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `bulb-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="bulb-outline" size="small"></lukso-icon>
+    <lukso-icon name="bulb-outline" size="medium"></lukso-icon>
+    <lukso-icon name="bulb-outline" size="large"></lukso-icon>
+    <lukso-icon name="bulb-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `camera`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="camera" size="small"></lukso-icon>
+    <lukso-icon name="camera" size="medium"></lukso-icon>
+    <lukso-icon name="camera" size="large"></lukso-icon>
+    <lukso-icon name="camera" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `clipboard`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="clipboard" size="small"></lukso-icon>
+    <lukso-icon name="clipboard" size="medium"></lukso-icon>
+    <lukso-icon name="clipboard" size="large"></lukso-icon>
+    <lukso-icon name="clipboard" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `clock`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="clock" size="small"></lukso-icon>
+    <lukso-icon name="clock" size="medium"></lukso-icon>
+    <lukso-icon name="clock" size="large"></lukso-icon>
+    <lukso-icon name="clock" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `close-lg`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="close-lg" size="small"></lukso-icon>
+    <lukso-icon name="close-lg" size="medium"></lukso-icon>
+    <lukso-icon name="close-lg" size="large"></lukso-icon>
+    <lukso-icon name="close-lg" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `close-sm`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="close-sm" size="small"></lukso-icon>
+    <lukso-icon name="close-sm" size="medium"></lukso-icon>
+    <lukso-icon name="close-sm" size="large"></lukso-icon>
+    <lukso-icon name="close-sm" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `cloud`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="cloud" size="small"></lukso-icon>
+    <lukso-icon name="cloud" size="medium"></lukso-icon>
+    <lukso-icon name="cloud" size="large"></lukso-icon>
+    <lukso-icon name="cloud" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `compass-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="compass-outline" size="small"></lukso-icon>
+    <lukso-icon name="compass-outline" size="medium"></lukso-icon>
+    <lukso-icon name="compass-outline" size="large"></lukso-icon>
+    <lukso-icon name="compass-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `complete-filled`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon
+      name="complete-filled"
+      size="small"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="complete-filled"
+      size="medium"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="complete-filled"
+      size="large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="complete-filled"
+      size="x-large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `complete-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="complete-outline" size="small"></lukso-icon>
+    <lukso-icon name="complete-outline" size="medium"></lukso-icon>
+    <lukso-icon name="complete-outline" size="large"></lukso-icon>
+    <lukso-icon name="complete-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `connect`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="connect" size="small"></lukso-icon>
+    <lukso-icon name="connect" size="medium"></lukso-icon>
+    <lukso-icon name="connect" size="large"></lukso-icon>
+    <lukso-icon name="connect" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `connections`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="connections" size="small"></lukso-icon>
+    <lukso-icon name="connections" size="medium"></lukso-icon>
+    <lukso-icon name="connections" size="large"></lukso-icon>
+    <lukso-icon name="connections" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `contract-lock`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="contract-lock" size="small"></lukso-icon>
+    <lukso-icon name="contract-lock" size="medium"></lukso-icon>
+    <lukso-icon name="contract-lock" size="large"></lukso-icon>
+    <lukso-icon name="contract-lock" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `controller`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="controller" size="small"></lukso-icon>
+    <lukso-icon name="controller" size="medium"></lukso-icon>
+    <lukso-icon name="controller" size="large"></lukso-icon>
+    <lukso-icon name="controller" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `copy`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="copy" size="small"></lukso-icon>
+    <lukso-icon name="copy" size="medium"></lukso-icon>
+    <lukso-icon name="copy" size="large"></lukso-icon>
+    <lukso-icon name="copy" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `cross-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="cross-outline" size="small"></lukso-icon>
+    <lukso-icon name="cross-outline" size="medium"></lukso-icon>
+    <lukso-icon name="cross-outline" size="large"></lukso-icon>
+    <lukso-icon name="cross-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `dots`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="dots" size="small"></lukso-icon>
+    <lukso-icon name="dots" size="medium"></lukso-icon>
+    <lukso-icon name="dots" size="large"></lukso-icon>
+    <lukso-icon name="dots" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `edit`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="edit" size="small"></lukso-icon>
+    <lukso-icon name="edit" size="medium"></lukso-icon>
+    <lukso-icon name="edit" size="large"></lukso-icon>
+    <lukso-icon name="edit" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `error`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="error" size="small"></lukso-icon>
+    <lukso-icon name="error" size="medium"></lukso-icon>
+    <lukso-icon name="error" size="large"></lukso-icon>
+    <lukso-icon name="error" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `expand`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="expand" size="small"></lukso-icon>
+    <lukso-icon name="expand" size="medium"></lukso-icon>
+    <lukso-icon name="expand" size="large"></lukso-icon>
+    <lukso-icon name="expand" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `extension`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="extension" size="small"></lukso-icon>
+    <lukso-icon name="extension" size="medium"></lukso-icon>
+    <lukso-icon name="extension" size="large"></lukso-icon>
+    <lukso-icon name="extension" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `eye-hide`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="eye-hide" size="small"></lukso-icon>
+    <lukso-icon name="eye-hide" size="medium"></lukso-icon>
+    <lukso-icon name="eye-hide" size="large"></lukso-icon>
+    <lukso-icon name="eye-hide" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `eye-show`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="eye-show" size="small"></lukso-icon>
+    <lukso-icon name="eye-show" size="medium"></lukso-icon>
+    <lukso-icon name="eye-show" size="large"></lukso-icon>
+    <lukso-icon name="eye-show" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `filter`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="filter" size="small"></lukso-icon>
+    <lukso-icon name="filter" size="medium"></lukso-icon>
+    <lukso-icon name="filter" size="large"></lukso-icon>
+    <lukso-icon name="filter" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `fish-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="fish-outline" size="small"></lukso-icon>
+    <lukso-icon name="fish-outline" size="medium"></lukso-icon>
+    <lukso-icon name="fish-outline" size="large"></lukso-icon>
+    <lukso-icon name="fish-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `flip`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="flip" size="small"></lukso-icon>
+    <lukso-icon name="flip" size="medium"></lukso-icon>
+    <lukso-icon name="flip" size="large"></lukso-icon>
+    <lukso-icon name="flip" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `globe`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="globe" size="small"></lukso-icon>
+    <lukso-icon name="globe" size="medium"></lukso-icon>
+    <lukso-icon name="globe" size="large"></lukso-icon>
+    <lukso-icon name="globe" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `hamburger`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="hamburger" size="small"></lukso-icon>
+    <lukso-icon name="hamburger" size="medium"></lukso-icon>
+    <lukso-icon name="hamburger" size="large"></lukso-icon>
+    <lukso-icon name="hamburger" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `infinite`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="infinite" size="small"></lukso-icon>
+    <lukso-icon name="infinite" size="medium"></lukso-icon>
+    <lukso-icon name="infinite" size="large"></lukso-icon>
+    <lukso-icon name="infinite" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `information`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="information" size="small"></lukso-icon>
+    <lukso-icon name="information" size="medium"></lukso-icon>
+    <lukso-icon name="information" size="large"></lukso-icon>
+    <lukso-icon name="information" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `key-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="key-outline" size="small"></lukso-icon>
+    <lukso-icon name="key-outline" size="medium"></lukso-icon>
+    <lukso-icon name="key-outline" size="large"></lukso-icon>
+    <lukso-icon name="key-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `link`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="link" size="small"></lukso-icon>
+    <lukso-icon name="link" size="medium"></lukso-icon>
+    <lukso-icon name="link" size="large"></lukso-icon>
+    <lukso-icon name="link" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `link-1`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="link-1" size="small"></lukso-icon>
+    <lukso-icon name="link-1" size="medium"></lukso-icon>
+    <lukso-icon name="link-1" size="large"></lukso-icon>
+    <lukso-icon name="link-1" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `link-2`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon
+      name="link-2"
+      size="small"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="link-2"
+      size="medium"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="link-2"
+      size="large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="link-2"
+      size="x-large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `link-3`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="link-3" size="small"></lukso-icon>
+    <lukso-icon name="link-3" size="medium"></lukso-icon>
+    <lukso-icon name="link-3" size="large"></lukso-icon>
+    <lukso-icon name="link-3" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `link-4`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon
+      name="link-4"
+      size="small"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="link-4"
+      size="medium"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="link-4"
+      size="large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="link-4"
+      size="x-large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `loading`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="loading" size="small"></lukso-icon>
+    <lukso-icon name="loading" size="medium"></lukso-icon>
+    <lukso-icon name="loading" size="large"></lukso-icon>
+    <lukso-icon name="loading" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `location`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="location" size="small"></lukso-icon>
+    <lukso-icon name="location" size="medium"></lukso-icon>
+    <lukso-icon name="location" size="large"></lukso-icon>
+    <lukso-icon name="location" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `locked`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="locked" size="small"></lukso-icon>
+    <lukso-icon name="locked" size="medium"></lukso-icon>
+    <lukso-icon name="locked" size="large"></lukso-icon>
+    <lukso-icon name="locked" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `login`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="login" size="small"></lukso-icon>
+    <lukso-icon name="login" size="medium"></lukso-icon>
+    <lukso-icon name="login" size="large"></lukso-icon>
+    <lukso-icon name="login" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `login-2`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="login-2" size="small"></lukso-icon>
+    <lukso-icon name="login-2" size="medium"></lukso-icon>
+    <lukso-icon name="login-2" size="large"></lukso-icon>
+    <lukso-icon name="login-2" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `login-3`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="login-3" size="small"></lukso-icon>
+    <lukso-icon name="login-3" size="medium"></lukso-icon>
+    <lukso-icon name="login-3" size="large"></lukso-icon>
+    <lukso-icon name="login-3" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `logo-chrome`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="logo-chrome" size="small"></lukso-icon>
+    <lukso-icon name="logo-chrome" size="medium"></lukso-icon>
+    <lukso-icon name="logo-chrome" size="large"></lukso-icon>
+    <lukso-icon name="logo-chrome" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `mail`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="mail" size="small"></lukso-icon>
+    <lukso-icon name="mail" size="medium"></lukso-icon>
+    <lukso-icon name="mail" size="large"></lukso-icon>
+    <lukso-icon name="mail" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `menu-1`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="menu-1" size="small"></lukso-icon>
+    <lukso-icon name="menu-1" size="medium"></lukso-icon>
+    <lukso-icon name="menu-1" size="large"></lukso-icon>
+    <lukso-icon name="menu-1" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `menu-2`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="menu-2" size="small"></lukso-icon>
+    <lukso-icon name="menu-2" size="medium"></lukso-icon>
+    <lukso-icon name="menu-2" size="large"></lukso-icon>
+    <lukso-icon name="menu-2" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `migrate`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="migrate" size="small"></lukso-icon>
+    <lukso-icon name="migrate" size="medium"></lukso-icon>
+    <lukso-icon name="migrate" size="large"></lukso-icon>
+    <lukso-icon name="migrate" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `minimize`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="minimize" size="small"></lukso-icon>
+    <lukso-icon name="minimize" size="medium"></lukso-icon>
+    <lukso-icon name="minimize" size="large"></lukso-icon>
+    <lukso-icon name="minimize" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `network`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="network" size="small"></lukso-icon>
+    <lukso-icon name="network" size="medium"></lukso-icon>
+    <lukso-icon name="network" size="large"></lukso-icon>
+    <lukso-icon name="network" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `notifications`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="notifications" size="small"></lukso-icon>
+    <lukso-icon name="notifications" size="medium"></lukso-icon>
+    <lukso-icon name="notifications" size="large"></lukso-icon>
+    <lukso-icon name="notifications" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `phone-portrait-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="phone-portrait-outline" size="small"></lukso-icon>
+    <lukso-icon name="phone-portrait-outline" size="medium"></lukso-icon>
+    <lukso-icon name="phone-portrait-outline" size="large"></lukso-icon>
+    <lukso-icon name="phone-portrait-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `pin`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="pin" size="small"></lukso-icon>
+    <lukso-icon name="pin" size="medium"></lukso-icon>
+    <lukso-icon name="pin" size="large"></lukso-icon>
+    <lukso-icon name="pin" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `play-filled`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="play-filled" size="small"></lukso-icon>
+    <lukso-icon name="play-filled" size="medium"></lukso-icon>
+    <lukso-icon name="play-filled" size="large"></lukso-icon>
+    <lukso-icon name="play-filled" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `play-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="play-outline" size="small"></lukso-icon>
+    <lukso-icon name="play-outline" size="medium"></lukso-icon>
+    <lukso-icon name="play-outline" size="large"></lukso-icon>
+    <lukso-icon name="play-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `plus`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="plus" size="small"></lukso-icon>
+    <lukso-icon name="plus" size="medium"></lukso-icon>
+    <lukso-icon name="plus" size="large"></lukso-icon>
+    <lukso-icon name="plus" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `profile-add`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="profile-add" size="small"></lukso-icon>
+    <lukso-icon name="profile-add" size="medium"></lukso-icon>
+    <lukso-icon name="profile-add" size="large"></lukso-icon>
+    <lukso-icon name="profile-add" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `profile-export`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="profile-export" size="small"></lukso-icon>
+    <lukso-icon name="profile-export" size="medium"></lukso-icon>
+    <lukso-icon name="profile-export" size="large"></lukso-icon>
+    <lukso-icon name="profile-export" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `profile-import`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="profile-import" size="small"></lukso-icon>
+    <lukso-icon name="profile-import" size="medium"></lukso-icon>
+    <lukso-icon name="profile-import" size="large"></lukso-icon>
+    <lukso-icon name="profile-import" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `profile-recovery`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="profile-recovery" size="small"></lukso-icon>
+    <lukso-icon name="profile-recovery" size="medium"></lukso-icon>
+    <lukso-icon name="profile-recovery" size="large"></lukso-icon>
+    <lukso-icon name="profile-recovery" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `profile-recovery-2`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon
+      name="profile-recovery-2"
+      size="small"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="profile-recovery-2"
+      size="medium"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="profile-recovery-2"
+      size="large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="profile-recovery-2"
+      size="x-large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `profile-restore`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="profile-restore" size="small"></lukso-icon>
+    <lukso-icon name="profile-restore" size="medium"></lukso-icon>
+    <lukso-icon name="profile-restore" size="large"></lukso-icon>
+    <lukso-icon name="profile-restore" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `profile`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="profile" size="small"></lukso-icon>
+    <lukso-icon name="profile" size="medium"></lukso-icon>
+    <lukso-icon name="profile" size="large"></lukso-icon>
+    <lukso-icon name="profile" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `qr-code`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon
+      name="qr-code"
+      size="small"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="qr-code"
+      size="medium"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="qr-code"
+      size="large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="qr-code"
+      size="x-large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `relayer`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="relayer" size="small"></lukso-icon>
+    <lukso-icon name="relayer" size="medium"></lukso-icon>
+    <lukso-icon name="relayer" size="large"></lukso-icon>
+    <lukso-icon name="relayer" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `reload`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="reload" size="small"></lukso-icon>
+    <lukso-icon name="reload" size="medium"></lukso-icon>
+    <lukso-icon name="reload" size="large"></lukso-icon>
+    <lukso-icon name="reload" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `return-down`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="return-down" size="small"></lukso-icon>
+    <lukso-icon name="return-down" size="medium"></lukso-icon>
+    <lukso-icon name="return-down" size="large"></lukso-icon>
+    <lukso-icon name="return-down" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `return-left`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="return-left" size="small"></lukso-icon>
+    <lukso-icon name="return-left" size="medium"></lukso-icon>
+    <lukso-icon name="return-left" size="large"></lukso-icon>
+    <lukso-icon name="return-left" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `return-right`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="return-right" size="small"></lukso-icon>
+    <lukso-icon name="return-right" size="medium"></lukso-icon>
+    <lukso-icon name="return-right" size="large"></lukso-icon>
+    <lukso-icon name="return-right" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `return-up`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="return-up" size="small"></lukso-icon>
+    <lukso-icon name="return-up" size="medium"></lukso-icon>
+    <lukso-icon name="return-up" size="large"></lukso-icon>
+    <lukso-icon name="return-up" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `search`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="search" size="small"></lukso-icon>
+    <lukso-icon name="search" size="medium"></lukso-icon>
+    <lukso-icon name="search" size="large"></lukso-icon>
+    <lukso-icon name="search" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `settings`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="settings" size="small"></lukso-icon>
+    <lukso-icon name="settings" size="medium"></lukso-icon>
+    <lukso-icon name="settings" size="large"></lukso-icon>
+    <lukso-icon name="settings" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `smart-contract-doc`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="smart-contract-doc" size="small"></lukso-icon>
+    <lukso-icon name="smart-contract-doc" size="medium"></lukso-icon>
+    <lukso-icon name="smart-contract-doc" size="large"></lukso-icon>
+    <lukso-icon name="smart-contract-doc" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `smart-contract`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="smart-contract" size="small"></lukso-icon>
+    <lukso-icon name="smart-contract" size="medium"></lukso-icon>
+    <lukso-icon name="smart-contract" size="large"></lukso-icon>
+    <lukso-icon name="smart-contract" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `star-filled`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="star-filled" size="small"></lukso-icon>
+    <lukso-icon name="star-filled" size="medium"></lukso-icon>
+    <lukso-icon name="star-filled" size="large"></lukso-icon>
+    <lukso-icon name="star-filled" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `star-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="star-outline" size="small"></lukso-icon>
+    <lukso-icon name="star-outline" size="medium"></lukso-icon>
+    <lukso-icon name="star-outline" size="large"></lukso-icon>
+    <lukso-icon name="star-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `step-dot`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon
+      name="step-dot"
+      size="small"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="step-dot"
+      size="medium"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="step-dot"
+      size="large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="step-dot"
+      size="x-large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `step-progress`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon
+      name="step-progress"
+      size="small"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="step-progress"
+      size="medium"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="step-progress"
+      size="large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+    <lukso-icon
+      name="step-progress"
+      size="x-large"
+      secondary-color="neutral-100"
+    ></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `steps`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="steps" size="small"></lukso-icon>
+    <lukso-icon name="steps" size="medium"></lukso-icon>
+    <lukso-icon name="steps" size="large"></lukso-icon>
+    <lukso-icon name="steps" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `tick`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="tick" size="small"></lukso-icon>
+    <lukso-icon name="tick" size="medium"></lukso-icon>
+    <lukso-icon name="tick" size="large"></lukso-icon>
+    <lukso-icon name="tick" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `timer-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="timer-outline" size="small"></lukso-icon>
+    <lukso-icon name="timer-outline" size="medium"></lukso-icon>
+    <lukso-icon name="timer-outline" size="large"></lukso-icon>
+    <lukso-icon name="timer-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `transaction-receive`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="transaction-receive" size="small"></lukso-icon>
+    <lukso-icon name="transaction-receive" size="medium"></lukso-icon>
+    <lukso-icon name="transaction-receive" size="large"></lukso-icon>
+    <lukso-icon name="transaction-receive" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `transaction-send`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="transaction-send" size="small"></lukso-icon>
+    <lukso-icon name="transaction-send" size="medium"></lukso-icon>
+    <lukso-icon name="transaction-send" size="large"></lukso-icon>
+    <lukso-icon name="transaction-send" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `transfer`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="transfer" size="small"></lukso-icon>
+    <lukso-icon name="transfer" size="medium"></lukso-icon>
+    <lukso-icon name="transfer" size="large"></lukso-icon>
+    <lukso-icon name="transfer" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `trash`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="trash" size="small"></lukso-icon>
+    <lukso-icon name="trash" size="medium"></lukso-icon>
+    <lukso-icon name="trash" size="large"></lukso-icon>
+    <lukso-icon name="trash" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `turn-down`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="turn-down" size="small"></lukso-icon>
+    <lukso-icon name="turn-down" size="medium"></lukso-icon>
+    <lukso-icon name="turn-down" size="large"></lukso-icon>
+    <lukso-icon name="turn-down" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `turn-left`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="turn-left" size="small"></lukso-icon>
+    <lukso-icon name="turn-left" size="medium"></lukso-icon>
+    <lukso-icon name="turn-left" size="large"></lukso-icon>
+    <lukso-icon name="turn-left" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `turn-right`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="turn-right" size="small"></lukso-icon>
+    <lukso-icon name="turn-right" size="medium"></lukso-icon>
+    <lukso-icon name="turn-right" size="large"></lukso-icon>
+    <lukso-icon name="turn-right" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `turn-up`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="turn-up" size="small"></lukso-icon>
+    <lukso-icon name="turn-up" size="medium"></lukso-icon>
+    <lukso-icon name="turn-up" size="large"></lukso-icon>
+    <lukso-icon name="turn-up" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `unlocked`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="unlocked" size="small"></lukso-icon>
+    <lukso-icon name="unlocked" size="medium"></lukso-icon>
+    <lukso-icon name="unlocked" size="large"></lukso-icon>
+    <lukso-icon name="unlocked" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `wallet-outline`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="wallet-outline" size="small"></lukso-icon>
+    <lukso-icon name="wallet-outline" size="medium"></lukso-icon>
+    <lukso-icon name="wallet-outline" size="large"></lukso-icon>
+    <lukso-icon name="wallet-outline" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `warning-round`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="warning-round" size="small"></lukso-icon>
+    <lukso-icon name="warning-round" size="medium"></lukso-icon>
+    <lukso-icon name="warning-round" size="large"></lukso-icon>
+    <lukso-icon name="warning-round" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `warning-triangle`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="warning-triangle" size="small"></lukso-icon>
+    <lukso-icon name="warning-triangle" size="medium"></lukso-icon>
+    <lukso-icon name="warning-triangle" size="large"></lukso-icon>
+    <lukso-icon name="warning-triangle" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `google-color`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="google-color" size="small"></lukso-icon>
+    <lukso-icon name="google-color" size="medium"></lukso-icon>
+    <lukso-icon name="google-color" size="large"></lukso-icon>
+    <lukso-icon name="google-color" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `lyx-logo`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="lyx-logo" size="small"></lukso-icon>
+    <lukso-icon name="lyx-logo" size="medium"></lukso-icon>
+    <lukso-icon name="lyx-logo" size="large"></lukso-icon>
+    <lukso-icon name="lyx-logo" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `eth-logo`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="eth-logo" size="small"></lukso-icon>
+    <lukso-icon name="eth-logo" size="medium"></lukso-icon>
+    <lukso-icon name="eth-logo" size="large"></lukso-icon>
+    <lukso-icon name="eth-logo" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `progress-indicator`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="progress-indicator" size="small"></lukso-icon>
+    <lukso-icon name="progress-indicator" size="medium"></lukso-icon>
+    <lukso-icon name="progress-indicator" size="large"></lukso-icon>
+    <lukso-icon name="progress-indicator" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `progress-complete`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="progress-complete" size="small"></lukso-icon>
+    <lukso-icon name="progress-complete" size="medium"></lukso-icon>
+    <lukso-icon name="progress-complete" size="large"></lukso-icon>
+    <lukso-icon name="progress-complete" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `pulse-dot`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="pulse-dot" size="small"></lukso-icon>
+    <lukso-icon name="pulse-dot" size="medium"></lukso-icon>
+    <lukso-icon name="pulse-dot" size="large"></lukso-icon>
+    <lukso-icon name="pulse-dot" size="x-large"></lukso-icon>
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `complete-filled-fade-in`
+  <div class="flex gap-4 mt-8">
+    <lukso-icon name="complete-filled-fade-in" size="small"></lukso-icon>
+    <lukso-icon name="complete-filled-fade-in" size="medium"></lukso-icon>
+    <lukso-icon name="complete-filled-fade-in" size="large"></lukso-icon>
+    <lukso-icon name="complete-filled-fade-in" size="x-large"></lukso-icon>
+  </div>
+</div>