diff --git a/src/Introduction.mdx b/src/Introduction.mdx
index 6405443..324fad6 100644
--- a/src/Introduction.mdx
+++ b/src/Introduction.mdx
@@ -1,6 +1,8 @@
+import React, { lazy, createElement } from 'react';
 import { IconGallery, IconItem } from '@storybook/blocks';
-import { list } from './list';
+import { iconList } from './iconList';
 import Cover from './cover.png';
+import * as Icon from './';
 
 <style>
   {`
@@ -18,23 +20,25 @@ import Cover from './cover.png';
 
 An Icon is a piece of visual element, but we must ensure its accessibility while using it. It can have 2 purposes:
 
-- **Decorative only** — for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Facehappy aria-hidden />`)
+- **Decorative only** — for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<FaceHappy aria-hidden />`)
 - **Non-decorative** — it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Print aria-label="Print this document" />`)
 
 <div className="spacer" />
 
-{list.map((group) => (
+{iconList.map((group) => (
 
 <div key={group.name}>
 
 <h2 style={{ marginTop: 32, marginBottom: 24 }}>{group.name}</h2>
 
   <IconGallery>
-    {group.icons.map((item) => (
-      <IconItem key={item.name} name={item.name}>
-        {item.icon}
+    {group.icons.map((item) => {
+      const MyIcon = Icon[item]
+      return (
+      <IconItem key={item} name={item}>
+        <MyIcon />
       </IconItem>
-    ))}
+    )})}
   </IconGallery>
 </div>
 
diff --git a/src/iconList.tsx b/src/iconList.tsx
new file mode 100644
index 0000000..8247aa9
--- /dev/null
+++ b/src/iconList.tsx
@@ -0,0 +1,266 @@
+export const iconList = [
+  {
+    name: 'Images',
+    icons: [
+      'Photo',
+      'Component',
+      'Grid',
+      'Outline',
+      'PhotoDrag',
+      'GridAlt',
+      'Search',
+      'Zoom',
+      'ZoomOut',
+      'ZoomReset',
+      'Eye',
+      'EyeClose',
+      'Lightning',
+      'LightningOff',
+      'Contrast',
+      'SwitchAlt',
+      'Mirror',
+      'Grow',
+      'PaintBrush',
+      'Ruler',
+      'Stop',
+      'Camera',
+      'Video',
+      'Speaker',
+      'Play',
+      'PlayBack',
+      'PlayNext',
+      'Rewind',
+      'FastForward',
+      'StopAlt',
+      'SideBySide',
+      'Stacked',
+      'Sun',
+      'Moon',
+    ],
+  },
+  {
+    name: 'Documents',
+    icons: [
+      'Book',
+      'Document',
+      'Copy',
+      'Category',
+      'Folder',
+      'Print',
+      'GraphLine',
+      'Calendar',
+      'GraphBar',
+      'Menu',
+      'MenuReverse',
+      'Filter',
+      'DocChart',
+      'DocList',
+    ],
+  },
+  {
+    name: 'Editing',
+    icons: [
+      'Markup',
+      'Bold',
+      'Italic',
+      'PaperClip',
+      'ListOrdered',
+      'ListUnordered',
+      'Paragraph',
+      'Markdown',
+    ],
+  },
+  {
+    name: 'Git',
+    icons: ['Repo', 'Commit', 'Branch', 'PullRequest', 'Merge'],
+  },
+  {
+    name: 'OS',
+    icons: ['Apple', 'Linux', 'Ubuntu', 'Windows', 'Chrome'],
+  },
+  {
+    name: 'Logos',
+    icons: [
+      'Storybook',
+      'AzureDevOps',
+      'Bitbucket',
+      'Chromatic',
+      'ComponentDriven',
+      'Discord',
+      'Facebook',
+      'Figma',
+      'GDrive',
+      'Github',
+      'Gitlab',
+      'Google',
+      'Graphql',
+      'Medium',
+      'Redux',
+      'Twitter',
+      'Youtube',
+      'VSCode',
+      'Linkedin',
+    ],
+  },
+  {
+    name: 'Devices',
+    icons: [
+      'Browser',
+      'Tablet',
+      'Mobile',
+      'Watch',
+      'Sidebar',
+      'SidebarAlt',
+      'SidebarAltToggle',
+      'SidebarToggle',
+      'BottomBar',
+      'BottomBarToggle',
+      'CPU',
+      'Database',
+      'Memory',
+      'Structure',
+      'Box',
+      'Power',
+    ],
+  },
+  {
+    name: 'CRUD',
+    icons: [
+      'Edit',
+      'Cog',
+      'Nut',
+      'Wrench',
+      'Ellipsis',
+      'Wand',
+      'Check',
+      'Form',
+      'BatchDeny',
+      'BatchAccept',
+      'Controls',
+      'Plus',
+      'CloseAlt',
+      'Cross',
+      'Trash',
+      'PinAlt',
+      'Unpin',
+      'Add',
+      'Subtract',
+      'Close',
+      'Delete',
+      'Passed',
+      'Changed',
+      'Failed',
+      'Clear',
+      'Comment',
+      'CommentAdd',
+      'RequestChange',
+      'Comments',
+      'Chat',
+      'Lock',
+      'Unlock',
+      'Key',
+      'Outbox',
+      'Credit',
+      'Button',
+      'Type',
+      'PointerDefault',
+      'PointerHand',
+      'Command',
+    ],
+  },
+  {
+    name: 'Communicate',
+    icons: [
+      'Info',
+      'Question',
+      'Support',
+      'Alert',
+      'AlertAlt',
+      'Email',
+      'Phone',
+      'Link',
+      'LinkBroken',
+      'Bell',
+      'RSS',
+      'ShareAlt',
+      'Share',
+      'JumpTo',
+      'CircleHollow',
+      'Circle',
+      'BookmarkHollow',
+      'Bookmark',
+      'Diamond',
+      'HeartHollow',
+      'Heart',
+      'StarHollow',
+      'Star',
+      'Certificate',
+      'Verified',
+      'ThumbsUp',
+      'Shield',
+      'Basket',
+      'Beaker',
+      'Hourglass',
+      'Flag',
+      'CloudHollow',
+      'Cloud',
+      'Sticker',
+    ],
+  },
+  {
+    name: 'Wayfinding',
+    icons: [
+      'ChevronUp',
+      'ChevronDown',
+      'ChevronLeft',
+      'ChevronRight',
+      'ArrowUp',
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowSolidUp',
+      'ArrowSolidDown',
+      'ArrowSolidLeft',
+      'ArrowSolidRight',
+      'ExpandAlt',
+      'Collapse',
+      'Expand',
+      'Unfold',
+      'Transfer',
+      'Redirect',
+      'Undo',
+      'Reply',
+      'Sync',
+      'Upload',
+      'Download',
+      'Back',
+      'Proceed',
+      'Refresh',
+      'Globe',
+      'Compass',
+      'Location',
+      'Pin',
+      'Time',
+      'Dashboard',
+      'Timer',
+      'Home',
+      'Admin',
+      'Direction',
+    ],
+  },
+  {
+    name: 'People',
+    icons: [
+      'User',
+      'UserAlt',
+      'UserAdd',
+      'Users',
+      'Profile',
+      'FaceHappy',
+      'FaceNeutral',
+      'FaceSad',
+      'Accessibility',
+      'AccessibilityAlt',
+    ],
+  },
+];
diff --git a/src/icons/Accessibility.tsx b/src/icons/Accessibility.tsx
index 5884caf..a0d012f 100644
--- a/src/icons/Accessibility.tsx
+++ b/src/icons/Accessibility.tsx
@@ -8,8 +8,8 @@ export const Accessibility = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/AccessibilityAlt.tsx b/src/icons/AccessibilityAlt.tsx
index 7eab21e..7e5547b 100644
--- a/src/icons/AccessibilityAlt.tsx
+++ b/src/icons/AccessibilityAlt.tsx
@@ -8,8 +8,8 @@ export const AccessibilityAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 15 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Add.tsx b/src/icons/Add.tsx
index a70a76e..5a38bb0 100644
--- a/src/icons/Add.tsx
+++ b/src/icons/Add.tsx
@@ -8,8 +8,8 @@ export const Add = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Admin.tsx b/src/icons/Admin.tsx
index ad8b656..4723db0 100644
--- a/src/icons/Admin.tsx
+++ b/src/icons/Admin.tsx
@@ -8,8 +8,8 @@ export const Admin = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Alert.tsx b/src/icons/Alert.tsx
index f6e6ae2..6739a5c 100644
--- a/src/icons/Alert.tsx
+++ b/src/icons/Alert.tsx
@@ -8,8 +8,8 @@ export const Alert = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/AlertAlt.tsx b/src/icons/AlertAlt.tsx
index fd13819..42ac08e 100644
--- a/src/icons/AlertAlt.tsx
+++ b/src/icons/AlertAlt.tsx
@@ -8,8 +8,8 @@ export const AlertAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Apple.tsx b/src/icons/Apple.tsx
index 82b2575..543d250 100644
--- a/src/icons/Apple.tsx
+++ b/src/icons/Apple.tsx
@@ -8,8 +8,8 @@ export const Apple = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowDown.tsx b/src/icons/ArrowDown.tsx
index 3e021af..0e4058f 100644
--- a/src/icons/ArrowDown.tsx
+++ b/src/icons/ArrowDown.tsx
@@ -8,8 +8,8 @@ export const ArrowDown = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx
index 6d4a207..d87555e 100644
--- a/src/icons/ArrowLeft.tsx
+++ b/src/icons/ArrowLeft.tsx
@@ -8,8 +8,8 @@ export const ArrowLeft = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx
index 6e9c209..dc10c1a 100644
--- a/src/icons/ArrowRight.tsx
+++ b/src/icons/ArrowRight.tsx
@@ -8,8 +8,8 @@ export const ArrowRight = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowSolidDown.tsx b/src/icons/ArrowSolidDown.tsx
index 67d22ae..81e72a1 100644
--- a/src/icons/ArrowSolidDown.tsx
+++ b/src/icons/ArrowSolidDown.tsx
@@ -8,8 +8,8 @@ export const ArrowSolidDown = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowSolidLeft.tsx b/src/icons/ArrowSolidLeft.tsx
index b2e44f7..0950194 100644
--- a/src/icons/ArrowSolidLeft.tsx
+++ b/src/icons/ArrowSolidLeft.tsx
@@ -8,8 +8,8 @@ export const ArrowSolidLeft = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowSolidRight.tsx b/src/icons/ArrowSolidRight.tsx
index a1b4b3a..880c5fb 100644
--- a/src/icons/ArrowSolidRight.tsx
+++ b/src/icons/ArrowSolidRight.tsx
@@ -8,8 +8,8 @@ export const ArrowSolidRight = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowSolidUp.tsx b/src/icons/ArrowSolidUp.tsx
index 2cf3c80..e5557d8 100644
--- a/src/icons/ArrowSolidUp.tsx
+++ b/src/icons/ArrowSolidUp.tsx
@@ -8,8 +8,8 @@ export const ArrowSolidUp = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ArrowUp.tsx b/src/icons/ArrowUp.tsx
index 0d87ebe..5740b6f 100644
--- a/src/icons/ArrowUp.tsx
+++ b/src/icons/ArrowUp.tsx
@@ -8,8 +8,8 @@ export const ArrowUp = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/AzureDevOps.tsx b/src/icons/AzureDevOps.tsx
index e5b195a..fa83961 100644
--- a/src/icons/AzureDevOps.tsx
+++ b/src/icons/AzureDevOps.tsx
@@ -8,8 +8,8 @@ export const AzureDevOps = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Back.tsx b/src/icons/Back.tsx
index d4e54bb..81d0bf2 100644
--- a/src/icons/Back.tsx
+++ b/src/icons/Back.tsx
@@ -8,8 +8,8 @@ export const Back = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Basket.tsx b/src/icons/Basket.tsx
index ee1c537..2f32256 100644
--- a/src/icons/Basket.tsx
+++ b/src/icons/Basket.tsx
@@ -8,8 +8,8 @@ export const Basket = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/BatchAccept.tsx b/src/icons/BatchAccept.tsx
index 7eeaae8..18dcfa5 100644
--- a/src/icons/BatchAccept.tsx
+++ b/src/icons/BatchAccept.tsx
@@ -8,8 +8,8 @@ export const BatchAccept = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/BatchDeny.tsx b/src/icons/BatchDeny.tsx
index 7035160..b6f2635 100644
--- a/src/icons/BatchDeny.tsx
+++ b/src/icons/BatchDeny.tsx
@@ -8,8 +8,8 @@ export const BatchDeny = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Beaker.tsx b/src/icons/Beaker.tsx
index 6296d32..62bf80e 100644
--- a/src/icons/Beaker.tsx
+++ b/src/icons/Beaker.tsx
@@ -8,8 +8,8 @@ export const Beaker = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Bell.tsx b/src/icons/Bell.tsx
index da2b647..f4ba22e 100644
--- a/src/icons/Bell.tsx
+++ b/src/icons/Bell.tsx
@@ -8,8 +8,8 @@ export const Bell = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Bitbucket.tsx b/src/icons/Bitbucket.tsx
index a9ae518..8a75d9b 100644
--- a/src/icons/Bitbucket.tsx
+++ b/src/icons/Bitbucket.tsx
@@ -8,8 +8,8 @@ export const Bitbucket = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Bold.tsx b/src/icons/Bold.tsx
index 4de7abc..6b66bcc 100644
--- a/src/icons/Bold.tsx
+++ b/src/icons/Bold.tsx
@@ -8,8 +8,8 @@ export const Bold = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Book.tsx b/src/icons/Book.tsx
index 9735909..92b4884 100644
--- a/src/icons/Book.tsx
+++ b/src/icons/Book.tsx
@@ -8,8 +8,8 @@ export const Book = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Bookmark.tsx b/src/icons/Bookmark.tsx
index ca44d3a..4b558eb 100644
--- a/src/icons/Bookmark.tsx
+++ b/src/icons/Bookmark.tsx
@@ -8,8 +8,8 @@ export const Bookmark = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/BookmarkHollow.tsx b/src/icons/BookmarkHollow.tsx
index 37bbfdc..6f03a7f 100644
--- a/src/icons/BookmarkHollow.tsx
+++ b/src/icons/BookmarkHollow.tsx
@@ -8,8 +8,8 @@ export const BookmarkHollow = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/BottomBar.tsx b/src/icons/BottomBar.tsx
index bfa7aa9..4655865 100644
--- a/src/icons/BottomBar.tsx
+++ b/src/icons/BottomBar.tsx
@@ -8,8 +8,8 @@ export const BottomBar = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/BottomBarToggle.tsx b/src/icons/BottomBarToggle.tsx
index 39e3f10..0e5a8fc 100644
--- a/src/icons/BottomBarToggle.tsx
+++ b/src/icons/BottomBarToggle.tsx
@@ -8,8 +8,8 @@ export const BottomBarToggle = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Box.tsx b/src/icons/Box.tsx
index 5819a56..abac31d 100644
--- a/src/icons/Box.tsx
+++ b/src/icons/Box.tsx
@@ -8,8 +8,8 @@ export const Box = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Branch.tsx b/src/icons/Branch.tsx
index a13cc55..0fc6b30 100644
--- a/src/icons/Branch.tsx
+++ b/src/icons/Branch.tsx
@@ -8,8 +8,8 @@ export const Branch = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Browser.tsx b/src/icons/Browser.tsx
index eda48ef..2347023 100644
--- a/src/icons/Browser.tsx
+++ b/src/icons/Browser.tsx
@@ -8,8 +8,8 @@ export const Browser = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Button.tsx b/src/icons/Button.tsx
index 8d18db0..e9acfd0 100644
--- a/src/icons/Button.tsx
+++ b/src/icons/Button.tsx
@@ -8,8 +8,8 @@ export const Button = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/CPU.tsx b/src/icons/CPU.tsx
index a153421..0644610 100644
--- a/src/icons/CPU.tsx
+++ b/src/icons/CPU.tsx
@@ -8,8 +8,8 @@ export const CPU = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Calendar.tsx b/src/icons/Calendar.tsx
index 1b647e4..2d8bb70 100644
--- a/src/icons/Calendar.tsx
+++ b/src/icons/Calendar.tsx
@@ -8,8 +8,8 @@ export const Calendar = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Camera.tsx b/src/icons/Camera.tsx
index c77edb0..f02944b 100644
--- a/src/icons/Camera.tsx
+++ b/src/icons/Camera.tsx
@@ -8,8 +8,8 @@ export const Camera = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Category.tsx b/src/icons/Category.tsx
index 23cbbcf..3ff3d6a 100644
--- a/src/icons/Category.tsx
+++ b/src/icons/Category.tsx
@@ -8,8 +8,8 @@ export const Category = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Certificate.tsx b/src/icons/Certificate.tsx
index dbcdfe1..cf064a4 100644
--- a/src/icons/Certificate.tsx
+++ b/src/icons/Certificate.tsx
@@ -8,8 +8,8 @@ export const Certificate = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Changed.tsx b/src/icons/Changed.tsx
index 09505d1..a8d78e7 100644
--- a/src/icons/Changed.tsx
+++ b/src/icons/Changed.tsx
@@ -8,8 +8,8 @@ export const Changed = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Chat.tsx b/src/icons/Chat.tsx
index 4e67a02..c7dc4c7 100644
--- a/src/icons/Chat.tsx
+++ b/src/icons/Chat.tsx
@@ -8,8 +8,8 @@ export const Chat = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Check.tsx b/src/icons/Check.tsx
index 7d54e19..c4c4bfb 100644
--- a/src/icons/Check.tsx
+++ b/src/icons/Check.tsx
@@ -8,8 +8,8 @@ export const Check = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx
index 635b2b9..6095e5a 100644
--- a/src/icons/ChevronDown.tsx
+++ b/src/icons/ChevronDown.tsx
@@ -8,8 +8,8 @@ export const ChevronDown = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ChevronLeft.tsx b/src/icons/ChevronLeft.tsx
index f216d9cc..f4df949 100644
--- a/src/icons/ChevronLeft.tsx
+++ b/src/icons/ChevronLeft.tsx
@@ -8,8 +8,8 @@ export const ChevronLeft = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ChevronRight.tsx b/src/icons/ChevronRight.tsx
index fa03fcf..d4aa9ac 100644
--- a/src/icons/ChevronRight.tsx
+++ b/src/icons/ChevronRight.tsx
@@ -8,8 +8,8 @@ export const ChevronRight = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ChevronUp.tsx b/src/icons/ChevronUp.tsx
index a291fa2..493814f 100644
--- a/src/icons/ChevronUp.tsx
+++ b/src/icons/ChevronUp.tsx
@@ -8,8 +8,8 @@ export const ChevronUp = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Chromatic.tsx b/src/icons/Chromatic.tsx
index 8f5876b..a222b14 100644
--- a/src/icons/Chromatic.tsx
+++ b/src/icons/Chromatic.tsx
@@ -8,8 +8,8 @@ export const Chromatic = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Chrome.tsx b/src/icons/Chrome.tsx
index aaa822f..f236a5c 100644
--- a/src/icons/Chrome.tsx
+++ b/src/icons/Chrome.tsx
@@ -8,8 +8,8 @@ export const Chrome = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Circle.tsx b/src/icons/Circle.tsx
index 065502d..a05e3fb 100644
--- a/src/icons/Circle.tsx
+++ b/src/icons/Circle.tsx
@@ -8,8 +8,8 @@ export const Circle = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/CircleHollow.tsx b/src/icons/CircleHollow.tsx
index 6f89178..f761097 100644
--- a/src/icons/CircleHollow.tsx
+++ b/src/icons/CircleHollow.tsx
@@ -8,8 +8,8 @@ export const CircleHollow = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Clear.tsx b/src/icons/Clear.tsx
index 1617274..4416c6e 100644
--- a/src/icons/Clear.tsx
+++ b/src/icons/Clear.tsx
@@ -8,8 +8,8 @@ export const Clear = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Close.tsx b/src/icons/Close.tsx
index ad9c9d0..f3ca147 100644
--- a/src/icons/Close.tsx
+++ b/src/icons/Close.tsx
@@ -8,8 +8,8 @@ export const Close = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/CloseAlt.tsx b/src/icons/CloseAlt.tsx
index 3d14d08..e6228b8 100644
--- a/src/icons/CloseAlt.tsx
+++ b/src/icons/CloseAlt.tsx
@@ -8,8 +8,8 @@ export const CloseAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Cloud.tsx b/src/icons/Cloud.tsx
index 96549ab..cbcfacb 100644
--- a/src/icons/Cloud.tsx
+++ b/src/icons/Cloud.tsx
@@ -8,8 +8,8 @@ export const Cloud = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/CloudHollow.tsx b/src/icons/CloudHollow.tsx
index e256259..b73fea5 100644
--- a/src/icons/CloudHollow.tsx
+++ b/src/icons/CloudHollow.tsx
@@ -8,8 +8,8 @@ export const CloudHollow = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Cog.tsx b/src/icons/Cog.tsx
index 4348a69..7d61a73 100644
--- a/src/icons/Cog.tsx
+++ b/src/icons/Cog.tsx
@@ -8,8 +8,8 @@ export const Cog = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Collapse.tsx b/src/icons/Collapse.tsx
index 46c1794..dd829aa 100644
--- a/src/icons/Collapse.tsx
+++ b/src/icons/Collapse.tsx
@@ -8,8 +8,8 @@ export const Collapse = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Command.tsx b/src/icons/Command.tsx
index cd3ecc4..425b617 100644
--- a/src/icons/Command.tsx
+++ b/src/icons/Command.tsx
@@ -8,8 +8,8 @@ export const Command = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Comment.tsx b/src/icons/Comment.tsx
index 85b63cb..bc86c11 100644
--- a/src/icons/Comment.tsx
+++ b/src/icons/Comment.tsx
@@ -8,8 +8,8 @@ export const Comment = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/CommentAdd.tsx b/src/icons/CommentAdd.tsx
index a26089e..fb78562 100644
--- a/src/icons/CommentAdd.tsx
+++ b/src/icons/CommentAdd.tsx
@@ -8,8 +8,8 @@ export const CommentAdd = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Comments.tsx b/src/icons/Comments.tsx
index 3326c9c..0c304c4 100644
--- a/src/icons/Comments.tsx
+++ b/src/icons/Comments.tsx
@@ -8,8 +8,8 @@ export const Comments = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Commit.tsx b/src/icons/Commit.tsx
index 4839ddd..d429549 100644
--- a/src/icons/Commit.tsx
+++ b/src/icons/Commit.tsx
@@ -8,8 +8,8 @@ export const Commit = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Compass.tsx b/src/icons/Compass.tsx
index 4316e59..8a6488a 100644
--- a/src/icons/Compass.tsx
+++ b/src/icons/Compass.tsx
@@ -8,8 +8,8 @@ export const Compass = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Component.tsx b/src/icons/Component.tsx
index 6cbb017..c05d577 100644
--- a/src/icons/Component.tsx
+++ b/src/icons/Component.tsx
@@ -8,8 +8,8 @@ export const Component = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ComponentDriven.tsx b/src/icons/ComponentDriven.tsx
index 682c4bc..006dddc 100644
--- a/src/icons/ComponentDriven.tsx
+++ b/src/icons/ComponentDriven.tsx
@@ -8,8 +8,8 @@ export const ComponentDriven = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Contrast.tsx b/src/icons/Contrast.tsx
index 698cad0..ccf931b 100644
--- a/src/icons/Contrast.tsx
+++ b/src/icons/Contrast.tsx
@@ -8,8 +8,8 @@ export const Contrast = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Controls.tsx b/src/icons/Controls.tsx
index 72c8ac2..fedaa94 100644
--- a/src/icons/Controls.tsx
+++ b/src/icons/Controls.tsx
@@ -8,8 +8,8 @@ export const Controls = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Copy.tsx b/src/icons/Copy.tsx
index a01517a..553b581 100644
--- a/src/icons/Copy.tsx
+++ b/src/icons/Copy.tsx
@@ -8,8 +8,8 @@ export const Copy = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Credit.tsx b/src/icons/Credit.tsx
index 5035f0d..bc87a39 100644
--- a/src/icons/Credit.tsx
+++ b/src/icons/Credit.tsx
@@ -8,8 +8,8 @@ export const Credit = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Cross.tsx b/src/icons/Cross.tsx
index 9a52db6..92be637 100644
--- a/src/icons/Cross.tsx
+++ b/src/icons/Cross.tsx
@@ -8,8 +8,8 @@ export const Cross = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Dashboard.tsx b/src/icons/Dashboard.tsx
index 5af28f9..297da5b 100644
--- a/src/icons/Dashboard.tsx
+++ b/src/icons/Dashboard.tsx
@@ -8,8 +8,8 @@ export const Dashboard = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Database.tsx b/src/icons/Database.tsx
index 2dd23bf..3199f41 100644
--- a/src/icons/Database.tsx
+++ b/src/icons/Database.tsx
@@ -8,8 +8,8 @@ export const Database = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Delete.tsx b/src/icons/Delete.tsx
index 6882069..4fd0e80 100644
--- a/src/icons/Delete.tsx
+++ b/src/icons/Delete.tsx
@@ -8,8 +8,8 @@ export const Delete = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Diamond.tsx b/src/icons/Diamond.tsx
index 17dd517..8d8f047 100644
--- a/src/icons/Diamond.tsx
+++ b/src/icons/Diamond.tsx
@@ -8,8 +8,8 @@ export const Diamond = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Direction.tsx b/src/icons/Direction.tsx
index 70d1972..c09915a 100644
--- a/src/icons/Direction.tsx
+++ b/src/icons/Direction.tsx
@@ -8,8 +8,8 @@ export const Direction = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Discord.tsx b/src/icons/Discord.tsx
index c38ba85..a4beaf0 100644
--- a/src/icons/Discord.tsx
+++ b/src/icons/Discord.tsx
@@ -8,8 +8,8 @@ export const Discord = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/DocChart.tsx b/src/icons/DocChart.tsx
index c0716b7..c5273da 100644
--- a/src/icons/DocChart.tsx
+++ b/src/icons/DocChart.tsx
@@ -8,8 +8,8 @@ export const DocChart = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/DocList.tsx b/src/icons/DocList.tsx
index a6a031c..5c477d5 100644
--- a/src/icons/DocList.tsx
+++ b/src/icons/DocList.tsx
@@ -8,8 +8,8 @@ export const DocList = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Document.tsx b/src/icons/Document.tsx
index fa57708..7aba4d1 100644
--- a/src/icons/Document.tsx
+++ b/src/icons/Document.tsx
@@ -8,8 +8,8 @@ export const Document = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Download.tsx b/src/icons/Download.tsx
index 906ecfc..227ecd0 100644
--- a/src/icons/Download.tsx
+++ b/src/icons/Download.tsx
@@ -8,8 +8,8 @@ export const Download = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Edit.tsx b/src/icons/Edit.tsx
index c7dbfd5..d5022bd 100644
--- a/src/icons/Edit.tsx
+++ b/src/icons/Edit.tsx
@@ -8,8 +8,8 @@ export const Edit = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Ellipsis.tsx b/src/icons/Ellipsis.tsx
index 8a6e7d4..8e86bd3 100644
--- a/src/icons/Ellipsis.tsx
+++ b/src/icons/Ellipsis.tsx
@@ -8,8 +8,8 @@ export const Ellipsis = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Email.tsx b/src/icons/Email.tsx
index 51d28df..04bdbf0 100644
--- a/src/icons/Email.tsx
+++ b/src/icons/Email.tsx
@@ -8,8 +8,8 @@ export const Email = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Expand.tsx b/src/icons/Expand.tsx
index 816c677..75ef8c9 100644
--- a/src/icons/Expand.tsx
+++ b/src/icons/Expand.tsx
@@ -8,8 +8,8 @@ export const Expand = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ExpandAlt.tsx b/src/icons/ExpandAlt.tsx
index 6d943a1..d7aeebe 100644
--- a/src/icons/ExpandAlt.tsx
+++ b/src/icons/ExpandAlt.tsx
@@ -8,8 +8,8 @@ export const ExpandAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Eye.tsx b/src/icons/Eye.tsx
index 4304970..19b7255 100644
--- a/src/icons/Eye.tsx
+++ b/src/icons/Eye.tsx
@@ -8,8 +8,8 @@ export const Eye = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/EyeClose.tsx b/src/icons/EyeClose.tsx
index 5855c3d..e5c1cdb 100644
--- a/src/icons/EyeClose.tsx
+++ b/src/icons/EyeClose.tsx
@@ -8,8 +8,8 @@ export const EyeClose = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/FaceHappy.tsx b/src/icons/FaceHappy.tsx
index d0c8b99..dad9cd8 100644
--- a/src/icons/FaceHappy.tsx
+++ b/src/icons/FaceHappy.tsx
@@ -8,8 +8,8 @@ export const FaceHappy = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/FaceNeutral.tsx b/src/icons/FaceNeutral.tsx
index 9232a78..c55c89f 100644
--- a/src/icons/FaceNeutral.tsx
+++ b/src/icons/FaceNeutral.tsx
@@ -8,8 +8,8 @@ export const FaceNeutral = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/FaceSad.tsx b/src/icons/FaceSad.tsx
index ba09cfb..8537e7e 100644
--- a/src/icons/FaceSad.tsx
+++ b/src/icons/FaceSad.tsx
@@ -8,8 +8,8 @@ export const FaceSad = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Facebook.tsx b/src/icons/Facebook.tsx
index 3aa7613..c44151a 100644
--- a/src/icons/Facebook.tsx
+++ b/src/icons/Facebook.tsx
@@ -8,8 +8,8 @@ export const Facebook = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Failed.tsx b/src/icons/Failed.tsx
index f20ea9b..ad39cf2 100644
--- a/src/icons/Failed.tsx
+++ b/src/icons/Failed.tsx
@@ -8,8 +8,8 @@ export const Failed = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/FastForward.tsx b/src/icons/FastForward.tsx
index 24bca21..fce7f31 100644
--- a/src/icons/FastForward.tsx
+++ b/src/icons/FastForward.tsx
@@ -8,8 +8,8 @@ export const FastForward = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Figma.tsx b/src/icons/Figma.tsx
index 5bc8f54..be9af23 100644
--- a/src/icons/Figma.tsx
+++ b/src/icons/Figma.tsx
@@ -8,8 +8,8 @@ export const Figma = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Filter.tsx b/src/icons/Filter.tsx
index 142c6e6..fdb75bd 100644
--- a/src/icons/Filter.tsx
+++ b/src/icons/Filter.tsx
@@ -8,8 +8,8 @@ export const Filter = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Flag.tsx b/src/icons/Flag.tsx
index c9b25bc..6316988 100644
--- a/src/icons/Flag.tsx
+++ b/src/icons/Flag.tsx
@@ -8,8 +8,8 @@ export const Flag = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Folder.tsx b/src/icons/Folder.tsx
index 9a0b0d3..677e147 100644
--- a/src/icons/Folder.tsx
+++ b/src/icons/Folder.tsx
@@ -8,8 +8,8 @@ export const Folder = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Form.tsx b/src/icons/Form.tsx
index 8c6e2d0..db07053 100644
--- a/src/icons/Form.tsx
+++ b/src/icons/Form.tsx
@@ -8,8 +8,8 @@ export const Form = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/GDrive.tsx b/src/icons/GDrive.tsx
index 51ce5dc..8275f40 100644
--- a/src/icons/GDrive.tsx
+++ b/src/icons/GDrive.tsx
@@ -8,8 +8,8 @@ export const GDrive = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Github.tsx b/src/icons/Github.tsx
index 9b2b0fc..e1b2926 100644
--- a/src/icons/Github.tsx
+++ b/src/icons/Github.tsx
@@ -8,8 +8,8 @@ export const Github = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Gitlab.tsx b/src/icons/Gitlab.tsx
index 997ef28..9d68314 100644
--- a/src/icons/Gitlab.tsx
+++ b/src/icons/Gitlab.tsx
@@ -8,8 +8,8 @@ export const Gitlab = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Globe.tsx b/src/icons/Globe.tsx
index 5610fb7..998e345 100644
--- a/src/icons/Globe.tsx
+++ b/src/icons/Globe.tsx
@@ -8,8 +8,8 @@ export const Globe = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Google.tsx b/src/icons/Google.tsx
index 9cde47c..33cfe98 100644
--- a/src/icons/Google.tsx
+++ b/src/icons/Google.tsx
@@ -8,8 +8,8 @@ export const Google = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/GraphBar.tsx b/src/icons/GraphBar.tsx
index dca7501..911b5e5 100644
--- a/src/icons/GraphBar.tsx
+++ b/src/icons/GraphBar.tsx
@@ -8,8 +8,8 @@ export const GraphBar = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/GraphLine.tsx b/src/icons/GraphLine.tsx
index d554df8..5bca926 100644
--- a/src/icons/GraphLine.tsx
+++ b/src/icons/GraphLine.tsx
@@ -8,8 +8,8 @@ export const GraphLine = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Graphql.tsx b/src/icons/Graphql.tsx
index 4f69078..68bb97d 100644
--- a/src/icons/Graphql.tsx
+++ b/src/icons/Graphql.tsx
@@ -8,8 +8,8 @@ export const Graphql = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Grid.tsx b/src/icons/Grid.tsx
index 7a3a0cf..d352847 100644
--- a/src/icons/Grid.tsx
+++ b/src/icons/Grid.tsx
@@ -8,8 +8,8 @@ export const Grid = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/GridAlt.tsx b/src/icons/GridAlt.tsx
index 651e94d..01da15b 100644
--- a/src/icons/GridAlt.tsx
+++ b/src/icons/GridAlt.tsx
@@ -8,8 +8,8 @@ export const GridAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Grow.tsx b/src/icons/Grow.tsx
index 117f065..851add6 100644
--- a/src/icons/Grow.tsx
+++ b/src/icons/Grow.tsx
@@ -8,8 +8,8 @@ export const Grow = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Heart.tsx b/src/icons/Heart.tsx
index 97b0f1a..5f83a4b 100644
--- a/src/icons/Heart.tsx
+++ b/src/icons/Heart.tsx
@@ -8,8 +8,8 @@ export const Heart = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/HeartHollow.tsx b/src/icons/HeartHollow.tsx
index 034de47..2153c87 100644
--- a/src/icons/HeartHollow.tsx
+++ b/src/icons/HeartHollow.tsx
@@ -8,8 +8,8 @@ export const HeartHollow = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Home.tsx b/src/icons/Home.tsx
index 2c28be6..b0296c1 100644
--- a/src/icons/Home.tsx
+++ b/src/icons/Home.tsx
@@ -8,8 +8,8 @@ export const Home = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Hourglass.tsx b/src/icons/Hourglass.tsx
index 2cc0578..8078e0e 100644
--- a/src/icons/Hourglass.tsx
+++ b/src/icons/Hourglass.tsx
@@ -8,8 +8,8 @@ export const Hourglass = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Info.tsx b/src/icons/Info.tsx
index c3b24f7..41c6b8c 100644
--- a/src/icons/Info.tsx
+++ b/src/icons/Info.tsx
@@ -8,8 +8,8 @@ export const Info = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Italic.tsx b/src/icons/Italic.tsx
index 9c72663..edc0d37 100644
--- a/src/icons/Italic.tsx
+++ b/src/icons/Italic.tsx
@@ -8,8 +8,8 @@ export const Italic = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/JumpTo.tsx b/src/icons/JumpTo.tsx
index 190b753..3032b32 100644
--- a/src/icons/JumpTo.tsx
+++ b/src/icons/JumpTo.tsx
@@ -8,8 +8,8 @@ export const JumpTo = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Key.tsx b/src/icons/Key.tsx
index 42da648..34acb53 100644
--- a/src/icons/Key.tsx
+++ b/src/icons/Key.tsx
@@ -8,8 +8,8 @@ export const Key = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Lightning.tsx b/src/icons/Lightning.tsx
index c9ec605..3a379b3 100644
--- a/src/icons/Lightning.tsx
+++ b/src/icons/Lightning.tsx
@@ -8,8 +8,8 @@ export const Lightning = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/LightningOff.tsx b/src/icons/LightningOff.tsx
index 28cd75e..89a4047 100644
--- a/src/icons/LightningOff.tsx
+++ b/src/icons/LightningOff.tsx
@@ -8,8 +8,8 @@ export const LightningOff = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Link.tsx b/src/icons/Link.tsx
index d54ec08..20c15f5 100644
--- a/src/icons/Link.tsx
+++ b/src/icons/Link.tsx
@@ -8,8 +8,8 @@ export const Link = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/LinkBroken.tsx b/src/icons/LinkBroken.tsx
index cbcf216..dfee74d 100644
--- a/src/icons/LinkBroken.tsx
+++ b/src/icons/LinkBroken.tsx
@@ -8,8 +8,8 @@ export const LinkBroken = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Linkedin.tsx b/src/icons/Linkedin.tsx
index 2d67958..0a46ba1 100644
--- a/src/icons/Linkedin.tsx
+++ b/src/icons/Linkedin.tsx
@@ -8,8 +8,8 @@ export const Linkedin = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Linux.tsx b/src/icons/Linux.tsx
index 7a67de4..8aa02d2 100644
--- a/src/icons/Linux.tsx
+++ b/src/icons/Linux.tsx
@@ -8,8 +8,8 @@ export const Linux = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ListOrdered.tsx b/src/icons/ListOrdered.tsx
index d70ab5f..b1b7b8d 100644
--- a/src/icons/ListOrdered.tsx
+++ b/src/icons/ListOrdered.tsx
@@ -8,8 +8,8 @@ export const ListOrdered = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ListUnordered.tsx b/src/icons/ListUnordered.tsx
index 614a501..041e45d 100644
--- a/src/icons/ListUnordered.tsx
+++ b/src/icons/ListUnordered.tsx
@@ -8,8 +8,8 @@ export const ListUnordered = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Location.tsx b/src/icons/Location.tsx
index 11faec2..3dcab1b 100644
--- a/src/icons/Location.tsx
+++ b/src/icons/Location.tsx
@@ -8,8 +8,8 @@ export const Location = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Lock.tsx b/src/icons/Lock.tsx
index 410fdf0..13d7a65 100644
--- a/src/icons/Lock.tsx
+++ b/src/icons/Lock.tsx
@@ -8,8 +8,8 @@ export const Lock = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Markdown.tsx b/src/icons/Markdown.tsx
index 778cadf..76ff199 100644
--- a/src/icons/Markdown.tsx
+++ b/src/icons/Markdown.tsx
@@ -8,8 +8,8 @@ export const Markdown = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Markup.tsx b/src/icons/Markup.tsx
index dc87bc5..dd587e8 100644
--- a/src/icons/Markup.tsx
+++ b/src/icons/Markup.tsx
@@ -8,8 +8,8 @@ export const Markup = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Medium.tsx b/src/icons/Medium.tsx
index abf5b71..3eb08e2 100644
--- a/src/icons/Medium.tsx
+++ b/src/icons/Medium.tsx
@@ -8,8 +8,8 @@ export const Medium = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Memory.tsx b/src/icons/Memory.tsx
index fae3d7a..b0403b9 100644
--- a/src/icons/Memory.tsx
+++ b/src/icons/Memory.tsx
@@ -8,8 +8,8 @@ export const Memory = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Menu.tsx b/src/icons/Menu.tsx
index 42d6c23..ee1551a 100644
--- a/src/icons/Menu.tsx
+++ b/src/icons/Menu.tsx
@@ -8,8 +8,8 @@ export const Menu = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/MenuReverse.tsx b/src/icons/MenuReverse.tsx
index 064de19..77808e3 100644
--- a/src/icons/MenuReverse.tsx
+++ b/src/icons/MenuReverse.tsx
@@ -8,8 +8,8 @@ export const MenuReverse = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Merge.tsx b/src/icons/Merge.tsx
index 17558e6..3df570f 100644
--- a/src/icons/Merge.tsx
+++ b/src/icons/Merge.tsx
@@ -8,8 +8,8 @@ export const Merge = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Mirror.tsx b/src/icons/Mirror.tsx
index db84cfe..56432e2 100644
--- a/src/icons/Mirror.tsx
+++ b/src/icons/Mirror.tsx
@@ -8,8 +8,8 @@ export const Mirror = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Mobile.tsx b/src/icons/Mobile.tsx
index 4981e95..58f7bde 100644
--- a/src/icons/Mobile.tsx
+++ b/src/icons/Mobile.tsx
@@ -8,8 +8,8 @@ export const Mobile = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Moon.tsx b/src/icons/Moon.tsx
index 1313eee..8037e3b 100644
--- a/src/icons/Moon.tsx
+++ b/src/icons/Moon.tsx
@@ -8,8 +8,8 @@ export const Moon = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 15 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Nut.tsx b/src/icons/Nut.tsx
index 5388b55..3c9c529 100644
--- a/src/icons/Nut.tsx
+++ b/src/icons/Nut.tsx
@@ -8,8 +8,8 @@ export const Nut = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Outbox.tsx b/src/icons/Outbox.tsx
index cb90277..3a58855 100644
--- a/src/icons/Outbox.tsx
+++ b/src/icons/Outbox.tsx
@@ -8,8 +8,8 @@ export const Outbox = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Outline.tsx b/src/icons/Outline.tsx
index 32b38a5..0355c98 100644
--- a/src/icons/Outline.tsx
+++ b/src/icons/Outline.tsx
@@ -8,8 +8,8 @@ export const Outline = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PaintBrush.tsx b/src/icons/PaintBrush.tsx
index 9dc9190..44d18cc 100644
--- a/src/icons/PaintBrush.tsx
+++ b/src/icons/PaintBrush.tsx
@@ -8,8 +8,8 @@ export const PaintBrush = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PaperClip.tsx b/src/icons/PaperClip.tsx
index f07770b..efa3f28 100644
--- a/src/icons/PaperClip.tsx
+++ b/src/icons/PaperClip.tsx
@@ -8,8 +8,8 @@ export const PaperClip = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Paragraph.tsx b/src/icons/Paragraph.tsx
index 991a7e5..1fed252 100644
--- a/src/icons/Paragraph.tsx
+++ b/src/icons/Paragraph.tsx
@@ -8,8 +8,8 @@ export const Paragraph = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Passed.tsx b/src/icons/Passed.tsx
index 63b438d..010c8e4 100644
--- a/src/icons/Passed.tsx
+++ b/src/icons/Passed.tsx
@@ -8,8 +8,8 @@ export const Passed = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Phone.tsx b/src/icons/Phone.tsx
index e43d5eb..15b3682 100644
--- a/src/icons/Phone.tsx
+++ b/src/icons/Phone.tsx
@@ -8,8 +8,8 @@ export const Phone = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Photo.tsx b/src/icons/Photo.tsx
index 7256e28..0150bd9 100644
--- a/src/icons/Photo.tsx
+++ b/src/icons/Photo.tsx
@@ -8,8 +8,8 @@ export const Photo = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PhotoDrag.tsx b/src/icons/PhotoDrag.tsx
index d5868e1..2082991 100644
--- a/src/icons/PhotoDrag.tsx
+++ b/src/icons/PhotoDrag.tsx
@@ -8,8 +8,8 @@ export const PhotoDrag = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Pin.tsx b/src/icons/Pin.tsx
index e7e5e1f..a1db455 100644
--- a/src/icons/Pin.tsx
+++ b/src/icons/Pin.tsx
@@ -8,8 +8,8 @@ export const Pin = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PinAlt.tsx b/src/icons/PinAlt.tsx
index 0f6361c..f3ff601 100644
--- a/src/icons/PinAlt.tsx
+++ b/src/icons/PinAlt.tsx
@@ -8,8 +8,8 @@ export const PinAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Play.tsx b/src/icons/Play.tsx
index bab8f1b..9e42454 100644
--- a/src/icons/Play.tsx
+++ b/src/icons/Play.tsx
@@ -8,8 +8,8 @@ export const Play = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PlayBack.tsx b/src/icons/PlayBack.tsx
index 1050085..82be372 100644
--- a/src/icons/PlayBack.tsx
+++ b/src/icons/PlayBack.tsx
@@ -8,8 +8,8 @@ export const PlayBack = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PlayNext.tsx b/src/icons/PlayNext.tsx
index cc11bc6..5c3b5fe 100644
--- a/src/icons/PlayNext.tsx
+++ b/src/icons/PlayNext.tsx
@@ -8,8 +8,8 @@ export const PlayNext = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Plus.tsx b/src/icons/Plus.tsx
index 0392d1e..6242f78 100644
--- a/src/icons/Plus.tsx
+++ b/src/icons/Plus.tsx
@@ -8,8 +8,8 @@ export const Plus = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PointerDefault.tsx b/src/icons/PointerDefault.tsx
index 09909b8..246bb5e 100644
--- a/src/icons/PointerDefault.tsx
+++ b/src/icons/PointerDefault.tsx
@@ -8,8 +8,8 @@ export const PointerDefault = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PointerHand.tsx b/src/icons/PointerHand.tsx
index 3f09e96..53e54e6 100644
--- a/src/icons/PointerHand.tsx
+++ b/src/icons/PointerHand.tsx
@@ -8,8 +8,8 @@ export const PointerHand = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Power.tsx b/src/icons/Power.tsx
index 2cbb39c..3f414b2 100644
--- a/src/icons/Power.tsx
+++ b/src/icons/Power.tsx
@@ -8,8 +8,8 @@ export const Power = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Print.tsx b/src/icons/Print.tsx
index 052b987..bee83f0 100644
--- a/src/icons/Print.tsx
+++ b/src/icons/Print.tsx
@@ -8,8 +8,8 @@ export const Print = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Proceed.tsx b/src/icons/Proceed.tsx
index 801e6f7..f6aeea4 100644
--- a/src/icons/Proceed.tsx
+++ b/src/icons/Proceed.tsx
@@ -8,8 +8,8 @@ export const Proceed = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Profile.tsx b/src/icons/Profile.tsx
index 50a33ed..232b4c8 100644
--- a/src/icons/Profile.tsx
+++ b/src/icons/Profile.tsx
@@ -8,8 +8,8 @@ export const Profile = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/PullRequest.tsx b/src/icons/PullRequest.tsx
index 0e55d98..d5e7e5e 100644
--- a/src/icons/PullRequest.tsx
+++ b/src/icons/PullRequest.tsx
@@ -8,8 +8,8 @@ export const PullRequest = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Question.tsx b/src/icons/Question.tsx
index 9e61a13..9cabfb7 100644
--- a/src/icons/Question.tsx
+++ b/src/icons/Question.tsx
@@ -8,8 +8,8 @@ export const Question = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/RSS.tsx b/src/icons/RSS.tsx
index b64cb33..b231bf6 100644
--- a/src/icons/RSS.tsx
+++ b/src/icons/RSS.tsx
@@ -8,8 +8,8 @@ export const RSS = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Redirect.tsx b/src/icons/Redirect.tsx
index de8d92a..52db7fd 100644
--- a/src/icons/Redirect.tsx
+++ b/src/icons/Redirect.tsx
@@ -8,8 +8,8 @@ export const Redirect = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Redux.tsx b/src/icons/Redux.tsx
index 54e5d15..a5a30fd 100644
--- a/src/icons/Redux.tsx
+++ b/src/icons/Redux.tsx
@@ -8,8 +8,8 @@ export const Redux = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Refresh.tsx b/src/icons/Refresh.tsx
index 11e3ba8..43dd9c2 100644
--- a/src/icons/Refresh.tsx
+++ b/src/icons/Refresh.tsx
@@ -8,8 +8,8 @@ export const Refresh = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Reply.tsx b/src/icons/Reply.tsx
index 96330e2..96336b4 100644
--- a/src/icons/Reply.tsx
+++ b/src/icons/Reply.tsx
@@ -8,8 +8,8 @@ export const Reply = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Repo.tsx b/src/icons/Repo.tsx
index 560f531..3ce9302 100644
--- a/src/icons/Repo.tsx
+++ b/src/icons/Repo.tsx
@@ -8,8 +8,8 @@ export const Repo = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/RequestChange.tsx b/src/icons/RequestChange.tsx
index d078658..b5e5a80 100644
--- a/src/icons/RequestChange.tsx
+++ b/src/icons/RequestChange.tsx
@@ -8,8 +8,8 @@ export const RequestChange = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Rewind.tsx b/src/icons/Rewind.tsx
index 2fc65d5..710483a 100644
--- a/src/icons/Rewind.tsx
+++ b/src/icons/Rewind.tsx
@@ -8,8 +8,8 @@ export const Rewind = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Ruler.tsx b/src/icons/Ruler.tsx
index c22bdef..2bd4946 100644
--- a/src/icons/Ruler.tsx
+++ b/src/icons/Ruler.tsx
@@ -8,8 +8,8 @@ export const Ruler = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Search.tsx b/src/icons/Search.tsx
index 942b984..454438a 100644
--- a/src/icons/Search.tsx
+++ b/src/icons/Search.tsx
@@ -8,8 +8,8 @@ export const Search = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Share.tsx b/src/icons/Share.tsx
index c69c1d0..6ddef14 100644
--- a/src/icons/Share.tsx
+++ b/src/icons/Share.tsx
@@ -8,8 +8,8 @@ export const Share = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ShareAlt.tsx b/src/icons/ShareAlt.tsx
index 9befb6d..f8d9eb8 100644
--- a/src/icons/ShareAlt.tsx
+++ b/src/icons/ShareAlt.tsx
@@ -8,8 +8,8 @@ export const ShareAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Shield.tsx b/src/icons/Shield.tsx
index 2db01cf..6306cfc 100644
--- a/src/icons/Shield.tsx
+++ b/src/icons/Shield.tsx
@@ -8,8 +8,8 @@ export const Shield = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/SideBySide.tsx b/src/icons/SideBySide.tsx
index 41e2de8..6c7e489 100644
--- a/src/icons/SideBySide.tsx
+++ b/src/icons/SideBySide.tsx
@@ -8,8 +8,8 @@ export const SideBySide = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Sidebar.tsx b/src/icons/Sidebar.tsx
index 76efb9d..ef4b634 100644
--- a/src/icons/Sidebar.tsx
+++ b/src/icons/Sidebar.tsx
@@ -8,8 +8,8 @@ export const Sidebar = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/SidebarAlt.tsx b/src/icons/SidebarAlt.tsx
index 187cfe3..9b0e776 100644
--- a/src/icons/SidebarAlt.tsx
+++ b/src/icons/SidebarAlt.tsx
@@ -8,8 +8,8 @@ export const SidebarAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/SidebarAltToggle.tsx b/src/icons/SidebarAltToggle.tsx
index 4899309..62ebb6d 100644
--- a/src/icons/SidebarAltToggle.tsx
+++ b/src/icons/SidebarAltToggle.tsx
@@ -8,8 +8,8 @@ export const SidebarAltToggle = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/SidebarToggle.tsx b/src/icons/SidebarToggle.tsx
index b0df736..db61615 100644
--- a/src/icons/SidebarToggle.tsx
+++ b/src/icons/SidebarToggle.tsx
@@ -8,8 +8,8 @@ export const SidebarToggle = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Speaker.tsx b/src/icons/Speaker.tsx
index 7ad732c..1bbd2ad 100644
--- a/src/icons/Speaker.tsx
+++ b/src/icons/Speaker.tsx
@@ -8,8 +8,8 @@ export const Speaker = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Stacked.tsx b/src/icons/Stacked.tsx
index 2991c83..af563cb 100644
--- a/src/icons/Stacked.tsx
+++ b/src/icons/Stacked.tsx
@@ -8,8 +8,8 @@ export const Stacked = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Star.tsx b/src/icons/Star.tsx
index 0d20904..3ac086d 100644
--- a/src/icons/Star.tsx
+++ b/src/icons/Star.tsx
@@ -8,8 +8,8 @@ export const Star = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/StarHollow.tsx b/src/icons/StarHollow.tsx
index ac68912..106ef57 100644
--- a/src/icons/StarHollow.tsx
+++ b/src/icons/StarHollow.tsx
@@ -8,8 +8,8 @@ export const StarHollow = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Sticker.tsx b/src/icons/Sticker.tsx
index 05648a7..472aa36 100644
--- a/src/icons/Sticker.tsx
+++ b/src/icons/Sticker.tsx
@@ -8,8 +8,8 @@ export const Sticker = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Stop.tsx b/src/icons/Stop.tsx
index 46b8a09..b8bc733 100644
--- a/src/icons/Stop.tsx
+++ b/src/icons/Stop.tsx
@@ -8,8 +8,8 @@ export const Stop = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/StopAlt.tsx b/src/icons/StopAlt.tsx
index 02e91ee..41f9258 100644
--- a/src/icons/StopAlt.tsx
+++ b/src/icons/StopAlt.tsx
@@ -8,8 +8,8 @@ export const StopAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Storybook.tsx b/src/icons/Storybook.tsx
index 21722bd..bb9bec8 100644
--- a/src/icons/Storybook.tsx
+++ b/src/icons/Storybook.tsx
@@ -8,8 +8,8 @@ export const Storybook = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Structure.tsx b/src/icons/Structure.tsx
index b9061bf..3fa0167 100644
--- a/src/icons/Structure.tsx
+++ b/src/icons/Structure.tsx
@@ -8,8 +8,8 @@ export const Structure = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Subtract.tsx b/src/icons/Subtract.tsx
index ba49825..9cd504f 100644
--- a/src/icons/Subtract.tsx
+++ b/src/icons/Subtract.tsx
@@ -8,8 +8,8 @@ export const Subtract = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Sun.tsx b/src/icons/Sun.tsx
index f991212..585164a 100644
--- a/src/icons/Sun.tsx
+++ b/src/icons/Sun.tsx
@@ -8,8 +8,8 @@ export const Sun = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Support.tsx b/src/icons/Support.tsx
index 5319ea2..3695b95 100644
--- a/src/icons/Support.tsx
+++ b/src/icons/Support.tsx
@@ -8,8 +8,8 @@ export const Support = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/SwitchAlt.tsx b/src/icons/SwitchAlt.tsx
index c26aae2..f1abedf 100644
--- a/src/icons/SwitchAlt.tsx
+++ b/src/icons/SwitchAlt.tsx
@@ -8,8 +8,8 @@ export const SwitchAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Sync.tsx b/src/icons/Sync.tsx
index 905ba8b..6abcb08 100644
--- a/src/icons/Sync.tsx
+++ b/src/icons/Sync.tsx
@@ -8,8 +8,8 @@ export const Sync = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Tablet.tsx b/src/icons/Tablet.tsx
index b460747..0a26bcd 100644
--- a/src/icons/Tablet.tsx
+++ b/src/icons/Tablet.tsx
@@ -8,8 +8,8 @@ export const Tablet = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ThumbsUp.tsx b/src/icons/ThumbsUp.tsx
index 631b5b0..bceaed1 100644
--- a/src/icons/ThumbsUp.tsx
+++ b/src/icons/ThumbsUp.tsx
@@ -8,8 +8,8 @@ export const ThumbsUp = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Time.tsx b/src/icons/Time.tsx
index afd199e..e225f49 100644
--- a/src/icons/Time.tsx
+++ b/src/icons/Time.tsx
@@ -8,8 +8,8 @@ export const Time = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Timer.tsx b/src/icons/Timer.tsx
index f5571e7..8e39f4c 100644
--- a/src/icons/Timer.tsx
+++ b/src/icons/Timer.tsx
@@ -8,8 +8,8 @@ export const Timer = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Transfer.tsx b/src/icons/Transfer.tsx
index 3841fa3..da8fb1e 100644
--- a/src/icons/Transfer.tsx
+++ b/src/icons/Transfer.tsx
@@ -8,8 +8,8 @@ export const Transfer = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Trash.tsx b/src/icons/Trash.tsx
index e999d52..698f9b3 100644
--- a/src/icons/Trash.tsx
+++ b/src/icons/Trash.tsx
@@ -8,8 +8,8 @@ export const Trash = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Twitter.tsx b/src/icons/Twitter.tsx
index 25ad252..e2d295c 100644
--- a/src/icons/Twitter.tsx
+++ b/src/icons/Twitter.tsx
@@ -8,8 +8,8 @@ export const Twitter = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Type.tsx b/src/icons/Type.tsx
index 16d231e..3274186 100644
--- a/src/icons/Type.tsx
+++ b/src/icons/Type.tsx
@@ -8,8 +8,8 @@ export const Type = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Ubuntu.tsx b/src/icons/Ubuntu.tsx
index e3de419..cd37f55 100644
--- a/src/icons/Ubuntu.tsx
+++ b/src/icons/Ubuntu.tsx
@@ -8,8 +8,8 @@ export const Ubuntu = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Undo.tsx b/src/icons/Undo.tsx
index 09f47fd..a3409f8 100644
--- a/src/icons/Undo.tsx
+++ b/src/icons/Undo.tsx
@@ -8,8 +8,8 @@ export const Undo = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Unfold.tsx b/src/icons/Unfold.tsx
index 4dd23b0..ce5cbcb 100644
--- a/src/icons/Unfold.tsx
+++ b/src/icons/Unfold.tsx
@@ -8,8 +8,8 @@ export const Unfold = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Unlock.tsx b/src/icons/Unlock.tsx
index a0995b7..902ab56 100644
--- a/src/icons/Unlock.tsx
+++ b/src/icons/Unlock.tsx
@@ -8,8 +8,8 @@ export const Unlock = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Unpin.tsx b/src/icons/Unpin.tsx
index 9745301..33ec493 100644
--- a/src/icons/Unpin.tsx
+++ b/src/icons/Unpin.tsx
@@ -8,8 +8,8 @@ export const Unpin = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Upload.tsx b/src/icons/Upload.tsx
index bc0c0d4..ce4af4b 100644
--- a/src/icons/Upload.tsx
+++ b/src/icons/Upload.tsx
@@ -8,8 +8,8 @@ export const Upload = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/User.tsx b/src/icons/User.tsx
index 618a456..905ad6d 100644
--- a/src/icons/User.tsx
+++ b/src/icons/User.tsx
@@ -8,8 +8,8 @@ export const User = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/UserAdd.tsx b/src/icons/UserAdd.tsx
index 0977166..d17ff92 100644
--- a/src/icons/UserAdd.tsx
+++ b/src/icons/UserAdd.tsx
@@ -8,8 +8,8 @@ export const UserAdd = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/UserAlt.tsx b/src/icons/UserAlt.tsx
index 08fa5b2..ace01e0 100644
--- a/src/icons/UserAlt.tsx
+++ b/src/icons/UserAlt.tsx
@@ -8,8 +8,8 @@ export const UserAlt = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Users.tsx b/src/icons/Users.tsx
index 8560b9b..8083964 100644
--- a/src/icons/Users.tsx
+++ b/src/icons/Users.tsx
@@ -8,8 +8,8 @@ export const Users = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/VSCode.tsx b/src/icons/VSCode.tsx
index 8a5f39c..b36993b 100644
--- a/src/icons/VSCode.tsx
+++ b/src/icons/VSCode.tsx
@@ -8,8 +8,8 @@ export const VSCode = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Verified.tsx b/src/icons/Verified.tsx
index a2ffeb7..f228a66 100644
--- a/src/icons/Verified.tsx
+++ b/src/icons/Verified.tsx
@@ -8,8 +8,8 @@ export const Verified = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Video.tsx b/src/icons/Video.tsx
index a265e97..99319df 100644
--- a/src/icons/Video.tsx
+++ b/src/icons/Video.tsx
@@ -8,8 +8,8 @@ export const Video = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Wand.tsx b/src/icons/Wand.tsx
index ec6a0b8..a92a68d 100644
--- a/src/icons/Wand.tsx
+++ b/src/icons/Wand.tsx
@@ -8,8 +8,8 @@ export const Wand = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Watch.tsx b/src/icons/Watch.tsx
index c79d175..a5f5a3e 100644
--- a/src/icons/Watch.tsx
+++ b/src/icons/Watch.tsx
@@ -8,8 +8,8 @@ export const Watch = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 15"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Windows.tsx b/src/icons/Windows.tsx
index 4f18929..313df2b 100644
--- a/src/icons/Windows.tsx
+++ b/src/icons/Windows.tsx
@@ -8,8 +8,8 @@ export const Windows = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Wrench.tsx b/src/icons/Wrench.tsx
index e6de945..d9963fe 100644
--- a/src/icons/Wrench.tsx
+++ b/src/icons/Wrench.tsx
@@ -8,8 +8,8 @@ export const Wrench = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Youtube.tsx b/src/icons/Youtube.tsx
index 0441b50..4a1ec57 100644
--- a/src/icons/Youtube.tsx
+++ b/src/icons/Youtube.tsx
@@ -8,8 +8,8 @@ export const Youtube = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/Zoom.tsx b/src/icons/Zoom.tsx
index 7b157f4..fe5466c 100644
--- a/src/icons/Zoom.tsx
+++ b/src/icons/Zoom.tsx
@@ -8,8 +8,8 @@ export const Zoom = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ZoomOut.tsx b/src/icons/ZoomOut.tsx
index 1a20f55..1a62a92 100644
--- a/src/icons/ZoomOut.tsx
+++ b/src/icons/ZoomOut.tsx
@@ -8,8 +8,8 @@ export const ZoomOut = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/icons/ZoomReset.tsx b/src/icons/ZoomReset.tsx
index 334664b..d07bc64 100644
--- a/src/icons/ZoomReset.tsx
+++ b/src/icons/ZoomReset.tsx
@@ -8,8 +8,8 @@ export const ZoomReset = (allProps: IconProps) => {
     <IconWrapper
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          width="100%"
+          height="100%"
           viewBox="0 0 14 14"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/index.ts b/src/index.ts
index f493dd5..fec484f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,887 +1,1551 @@
 import { lazy } from 'react';
 import { withSuspense } from './utils/withSuspense';
 
-export const Photo = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Photo };
-}));
-export const Component = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Component };
-}));
-export const Grid = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Grid };
-}));
-export const Outline = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Outline };
-}));
-export const PhotoDrag = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.PhotoDrag };
-}));
-export const GridAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.GridAlt };
-}));
-export const Search = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Search };
-}));
-export const Zoom = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Zoom };
-}));
-export const ZoomOut = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.ZoomOut };
-}));
-export const ZoomReset = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.ZoomReset };
-}));
-export const Eye = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Eye };
-}));
-export const EyeClose = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.EyeClose };
-}));
-export const Lightning = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Lightning };
-}));
-export const LightningOff = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.LightningOff };
-}));
-export const Contrast = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Contrast };
-}));
-export const SwitchAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.SwitchAlt };
-}));
-export const Mirror = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Mirror };
-}));
-export const Grow = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Grow };
-}));
-export const PaintBrush = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.PaintBrush };
-}));
-export const Ruler = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Ruler };
-}));
-export const Stop = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Stop };
-}));
-export const Camera = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Camera };
-}));
-export const Video = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Video };
-}));
-export const Speaker = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Speaker };
-}));
-export const Play = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Play };
-}));
-export const PlayBack = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.PlayBack };
-}));
-export const PlayNext = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.PlayNext };
-}));
-export const Rewind = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Rewind };
-}));
-export const FastForward = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.FastForward };
-}));
-export const StopAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.StopAlt };
-}));
-export const SideBySide = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.SideBySide };
-}));
-export const Stacked = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Stacked };
-}));
-export const Sun = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Sun };
-}));
-export const Moon = withSuspense(lazy(async () => {
-  const m = await import('./groups/Images');
-  return { default: m.Moon };
-}));
-export const Book = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Book };
-}));
-export const Document = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Document };
-}));
-export const Copy = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Copy };
-}));
-export const Category = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Category };
-}));
-export const Folder = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Folder };
-}));
-export const Print = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Print };
-}));
-export const GraphLine = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.GraphLine };
-}));
-export const Calendar = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Calendar };
-}));
-export const GraphBar = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.GraphBar };
-}));
-export const Menu = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Menu };
-}));
-export const MenuReverse = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.MenuReverse };
-}));
-export const Filter = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.Filter };
-}));
-export const DocChart = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.DocChart };
-}));
-export const DocList = withSuspense(lazy(async () => {
-  const m = await import('./groups/Documents');
-  return { default: m.DocList };
-}));
-export const Markup = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.Markup };
-}));
-export const Bold = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.Bold };
-}));
-export const Italic = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.Italic };
-}));
-export const PaperClip = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.PaperClip };
-}));
-export const ListOrdered = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.ListOrdered };
-}));
-export const ListUnordered = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.ListUnordered };
-}));
-export const Paragraph = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.Paragraph };
-}));
-export const Markdown = withSuspense(lazy(async () => {
-  const m = await import('./groups/Editing');
-  return { default: m.Markdown };
-}));
-export const Repo = withSuspense(lazy(async () => {
-  const m = await import('./groups/Git');
-  return { default: m.Repo };
-}));
-export const Commit = withSuspense(lazy(async () => {
-  const m = await import('./groups/Git');
-  return { default: m.Commit };
-}));
-export const Branch = withSuspense(lazy(async () => {
-  const m = await import('./groups/Git');
-  return { default: m.Branch };
-}));
-export const PullRequest = withSuspense(lazy(async () => {
-  const m = await import('./groups/Git');
-  return { default: m.PullRequest };
-}));
-export const Merge = withSuspense(lazy(async () => {
-  const m = await import('./groups/Git');
-  return { default: m.Merge };
-}));
-export const Apple = withSuspense(lazy(async () => {
-  const m = await import('./groups/OS');
-  return { default: m.Apple };
-}));
-export const Linux = withSuspense(lazy(async () => {
-  const m = await import('./groups/OS');
-  return { default: m.Linux };
-}));
-export const Ubuntu = withSuspense(lazy(async () => {
-  const m = await import('./groups/OS');
-  return { default: m.Ubuntu };
-}));
-export const Windows = withSuspense(lazy(async () => {
-  const m = await import('./groups/OS');
-  return { default: m.Windows };
-}));
-export const Chrome = withSuspense(lazy(async () => {
-  const m = await import('./groups/OS');
-  return { default: m.Chrome };
-}));
-export const Storybook = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Storybook };
-}));
-export const AzureDevOps = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.AzureDevOps };
-}));
-export const Bitbucket = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Bitbucket };
-}));
-export const Chromatic = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Chromatic };
-}));
-export const ComponentDriven = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.ComponentDriven };
-}));
-export const Discord = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Discord };
-}));
-export const Facebook = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Facebook };
-}));
-export const Figma = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Figma };
-}));
-export const GDrive = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.GDrive };
-}));
-export const Github = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Github };
-}));
-export const Gitlab = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Gitlab };
-}));
-export const Google = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Google };
-}));
-export const Graphql = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Graphql };
-}));
-export const Medium = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Medium };
-}));
-export const Redux = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Redux };
-}));
-export const Twitter = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Twitter };
-}));
-export const Youtube = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Youtube };
-}));
-export const VSCode = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.VSCode };
-}));
-export const Linkedin = withSuspense(lazy(async () => {
-  const m = await import('./groups/Logos');
-  return { default: m.Linkedin };
-}));
-export const Browser = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Browser };
-}));
-export const Tablet = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Tablet };
-}));
-export const Mobile = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Mobile };
-}));
-export const Watch = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Watch };
-}));
-export const Sidebar = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Sidebar };
-}));
-export const SidebarAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.SidebarAlt };
-}));
-export const SidebarAltToggle = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.SidebarAltToggle };
-}));
-export const SidebarToggle = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.SidebarToggle };
-}));
-export const BottomBar = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.BottomBar };
-}));
-export const BottomBarToggle = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.BottomBarToggle };
-}));
-export const CPU = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.CPU };
-}));
-export const Database = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Database };
-}));
-export const Memory = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Memory };
-}));
-export const Structure = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Structure };
-}));
-export const Box = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Box };
-}));
-export const Power = withSuspense(lazy(async () => {
-  const m = await import('./groups/Devices');
-  return { default: m.Power };
-}));
-export const Edit = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Edit };
-}));
-export const Cog = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Cog };
-}));
-export const Nut = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Nut };
-}));
-export const Wrench = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Wrench };
-}));
-export const Ellipsis = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Ellipsis };
-}));
-export const Wand = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Wand };
-}));
-export const Check = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Check };
-}));
-export const Form = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Form };
-}));
-export const BatchDeny = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.BatchDeny };
-}));
-export const BatchAccept = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.BatchAccept };
-}));
-export const Controls = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Controls };
-}));
-export const Plus = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Plus };
-}));
-export const CloseAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.CloseAlt };
-}));
-export const Cross = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Cross };
-}));
-export const Trash = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Trash };
-}));
-export const PinAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.PinAlt };
-}));
-export const Unpin = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Unpin };
-}));
-export const Add = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Add };
-}));
-export const Subtract = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Subtract };
-}));
-export const Close = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Close };
-}));
-export const Delete = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Delete };
-}));
-export const Passed = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Passed };
-}));
-export const Changed = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Changed };
-}));
-export const Failed = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Failed };
-}));
-export const Clear = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Clear };
-}));
-export const Comment = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Comment };
-}));
-export const CommentAdd = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.CommentAdd };
-}));
-export const RequestChange = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.RequestChange };
-}));
-export const Comments = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Comments };
-}));
-export const Chat = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Chat };
-}));
-export const Lock = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Lock };
-}));
-export const Unlock = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Unlock };
-}));
-export const Key = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Key };
-}));
-export const Outbox = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Outbox };
-}));
-export const Credit = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Credit };
-}));
-export const Button = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Button };
-}));
-export const Type = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Type };
-}));
-export const PointerDefault = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.PointerDefault };
-}));
-export const PointerHand = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.PointerHand };
-}));
-export const Command = withSuspense(lazy(async () => {
-  const m = await import('./groups/CRUD');
-  return { default: m.Command };
-}));
-export const Info = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Info };
-}));
-export const Question = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Question };
-}));
-export const Support = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Support };
-}));
-export const Alert = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Alert };
-}));
-export const AlertAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.AlertAlt };
-}));
-export const Email = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Email };
-}));
-export const Phone = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Phone };
-}));
-export const Link = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Link };
-}));
-export const LinkBroken = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.LinkBroken };
-}));
-export const Bell = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Bell };
-}));
-export const RSS = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.RSS };
-}));
-export const ShareAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.ShareAlt };
-}));
-export const Share = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Share };
-}));
-export const JumpTo = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.JumpTo };
-}));
-export const CircleHollow = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.CircleHollow };
-}));
-export const Circle = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Circle };
-}));
-export const BookmarkHollow = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.BookmarkHollow };
-}));
-export const Bookmark = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Bookmark };
-}));
-export const Diamond = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Diamond };
-}));
-export const HeartHollow = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.HeartHollow };
-}));
-export const Heart = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Heart };
-}));
-export const StarHollow = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.StarHollow };
-}));
-export const Star = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Star };
-}));
-export const Certificate = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Certificate };
-}));
-export const Verified = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Verified };
-}));
-export const ThumbsUp = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.ThumbsUp };
-}));
-export const Shield = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Shield };
-}));
-export const Basket = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Basket };
-}));
-export const Beaker = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Beaker };
-}));
-export const Hourglass = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Hourglass };
-}));
-export const Flag = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Flag };
-}));
-export const CloudHollow = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.CloudHollow };
-}));
-export const Cloud = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Cloud };
-}));
-export const Sticker = withSuspense(lazy(async () => {
-  const m = await import('./groups/Communicate');
-  return { default: m.Sticker };
-}));
-export const ChevronUp = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ChevronUp };
-}));
-export const ChevronDown = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ChevronDown };
-}));
-export const ChevronLeft = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ChevronLeft };
-}));
-export const ChevronRight = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ChevronRight };
-}));
-export const ArrowUp = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowUp };
-}));
-export const ArrowDown = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowDown };
-}));
-export const ArrowLeft = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowLeft };
-}));
-export const ArrowRight = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowRight };
-}));
-export const ArrowSolidUp = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowSolidUp };
-}));
-export const ArrowSolidDown = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowSolidDown };
-}));
-export const ArrowSolidLeft = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowSolidLeft };
-}));
-export const ArrowSolidRight = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ArrowSolidRight };
-}));
-export const ExpandAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.ExpandAlt };
-}));
-export const Collapse = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Collapse };
-}));
-export const Expand = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Expand };
-}));
-export const Unfold = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Unfold };
-}));
-export const Transfer = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Transfer };
-}));
-export const Redirect = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Redirect };
-}));
-export const Undo = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Undo };
-}));
-export const Reply = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Reply };
-}));
-export const Sync = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Sync };
-}));
-export const Upload = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Upload };
-}));
-export const Download = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Download };
-}));
-export const Back = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Back };
-}));
-export const Proceed = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Proceed };
-}));
-export const Refresh = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Refresh };
-}));
-export const Globe = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Globe };
-}));
-export const Compass = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Compass };
-}));
-export const Location = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Location };
-}));
-export const Pin = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Pin };
-}));
-export const Time = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Time };
-}));
-export const Dashboard = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Dashboard };
-}));
-export const Timer = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Timer };
-}));
-export const Home = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Home };
-}));
-export const Admin = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Admin };
-}));
-export const Direction = withSuspense(lazy(async () => {
-  const m = await import('./groups/Wayfinding');
-  return { default: m.Direction };
-}));
-export const User = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.User };
-}));
-export const UserAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.UserAlt };
-}));
-export const UserAdd = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.UserAdd };
-}));
-export const Users = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.Users };
-}));
-export const Profile = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.Profile };
-}));
-export const FaceHappy = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.FaceHappy };
-}));
-export const FaceNeutral = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.FaceNeutral };
-}));
-export const FaceSad = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.FaceSad };
-}));
-export const Accessibility = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.Accessibility };
-}));
-export const AccessibilityAlt = withSuspense(lazy(async () => {
-  const m = await import('./groups/People');
-  return { default: m.AccessibilityAlt };
-}));
+export { iconList } from './iconList';
+
+export const Photo = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Photo };
+  })
+);
+
+export const Component = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Component };
+  })
+);
+
+export const Grid = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Grid };
+  })
+);
+
+export const Outline = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Outline };
+  })
+);
+
+export const PhotoDrag = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.PhotoDrag };
+  })
+);
+
+export const GridAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.GridAlt };
+  })
+);
+
+export const Search = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Search };
+  })
+);
+
+export const Zoom = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Zoom };
+  })
+);
+
+export const ZoomOut = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.ZoomOut };
+  })
+);
+
+export const ZoomReset = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.ZoomReset };
+  })
+);
+
+export const Eye = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Eye };
+  })
+);
+
+export const EyeClose = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.EyeClose };
+  })
+);
+
+export const Lightning = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Lightning };
+  })
+);
+
+export const LightningOff = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.LightningOff };
+  })
+);
+
+export const Contrast = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Contrast };
+  })
+);
+
+export const SwitchAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.SwitchAlt };
+  })
+);
+
+export const Mirror = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Mirror };
+  })
+);
+
+export const Grow = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Grow };
+  })
+);
+
+export const PaintBrush = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.PaintBrush };
+  })
+);
+
+export const Ruler = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Ruler };
+  })
+);
+
+export const Stop = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Stop };
+  })
+);
+
+export const Camera = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Camera };
+  })
+);
+
+export const Video = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Video };
+  })
+);
+
+export const Speaker = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Speaker };
+  })
+);
+
+export const Play = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Play };
+  })
+);
+
+export const PlayBack = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.PlayBack };
+  })
+);
+
+export const PlayNext = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.PlayNext };
+  })
+);
+
+export const Rewind = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Rewind };
+  })
+);
+
+export const FastForward = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.FastForward };
+  })
+);
+
+export const StopAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.StopAlt };
+  })
+);
+
+export const SideBySide = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.SideBySide };
+  })
+);
+
+export const Stacked = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Stacked };
+  })
+);
+
+export const Sun = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Sun };
+  })
+);
+
+export const Moon = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Images');
+    return { default: m.Moon };
+  })
+);
+
+export const Book = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Book };
+  })
+);
+
+export const Document = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Document };
+  })
+);
+
+export const Copy = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Copy };
+  })
+);
+
+export const Category = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Category };
+  })
+);
+
+export const Folder = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Folder };
+  })
+);
+
+export const Print = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Print };
+  })
+);
+
+export const GraphLine = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.GraphLine };
+  })
+);
+
+export const Calendar = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Calendar };
+  })
+);
+
+export const GraphBar = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.GraphBar };
+  })
+);
+
+export const Menu = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Menu };
+  })
+);
+
+export const MenuReverse = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.MenuReverse };
+  })
+);
+
+export const Filter = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.Filter };
+  })
+);
+
+export const DocChart = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.DocChart };
+  })
+);
+
+export const DocList = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Documents');
+    return { default: m.DocList };
+  })
+);
+
+export const Markup = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.Markup };
+  })
+);
+
+export const Bold = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.Bold };
+  })
+);
+
+export const Italic = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.Italic };
+  })
+);
+
+export const PaperClip = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.PaperClip };
+  })
+);
+
+export const ListOrdered = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.ListOrdered };
+  })
+);
+
+export const ListUnordered = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.ListUnordered };
+  })
+);
+
+export const Paragraph = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.Paragraph };
+  })
+);
+
+export const Markdown = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Editing');
+    return { default: m.Markdown };
+  })
+);
+
+export const Repo = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Git');
+    return { default: m.Repo };
+  })
+);
+
+export const Commit = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Git');
+    return { default: m.Commit };
+  })
+);
+
+export const Branch = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Git');
+    return { default: m.Branch };
+  })
+);
+
+export const PullRequest = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Git');
+    return { default: m.PullRequest };
+  })
+);
+
+export const Merge = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Git');
+    return { default: m.Merge };
+  })
+);
+
+export const Apple = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/OS');
+    return { default: m.Apple };
+  })
+);
+
+export const Linux = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/OS');
+    return { default: m.Linux };
+  })
+);
+
+export const Ubuntu = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/OS');
+    return { default: m.Ubuntu };
+  })
+);
+
+export const Windows = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/OS');
+    return { default: m.Windows };
+  })
+);
+
+export const Chrome = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/OS');
+    return { default: m.Chrome };
+  })
+);
+
+export const Storybook = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Storybook };
+  })
+);
+
+export const AzureDevOps = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.AzureDevOps };
+  })
+);
+
+export const Bitbucket = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Bitbucket };
+  })
+);
+
+export const Chromatic = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Chromatic };
+  })
+);
+
+export const ComponentDriven = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.ComponentDriven };
+  })
+);
+
+export const Discord = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Discord };
+  })
+);
+
+export const Facebook = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Facebook };
+  })
+);
+
+export const Figma = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Figma };
+  })
+);
+
+export const GDrive = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.GDrive };
+  })
+);
+
+export const Github = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Github };
+  })
+);
+
+export const Gitlab = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Gitlab };
+  })
+);
+
+export const Google = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Google };
+  })
+);
+
+export const Graphql = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Graphql };
+  })
+);
+
+export const Medium = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Medium };
+  })
+);
+
+export const Redux = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Redux };
+  })
+);
+
+export const Twitter = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Twitter };
+  })
+);
+
+export const Youtube = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Youtube };
+  })
+);
+
+export const VSCode = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.VSCode };
+  })
+);
+
+export const Linkedin = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Logos');
+    return { default: m.Linkedin };
+  })
+);
+
+export const Browser = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Browser };
+  })
+);
+
+export const Tablet = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Tablet };
+  })
+);
+
+export const Mobile = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Mobile };
+  })
+);
+
+export const Watch = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Watch };
+  })
+);
+
+export const Sidebar = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Sidebar };
+  })
+);
+
+export const SidebarAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.SidebarAlt };
+  })
+);
+
+export const SidebarAltToggle = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.SidebarAltToggle };
+  })
+);
+
+export const SidebarToggle = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.SidebarToggle };
+  })
+);
+
+export const BottomBar = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.BottomBar };
+  })
+);
+
+export const BottomBarToggle = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.BottomBarToggle };
+  })
+);
+
+export const CPU = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.CPU };
+  })
+);
+
+export const Database = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Database };
+  })
+);
+
+export const Memory = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Memory };
+  })
+);
+
+export const Structure = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Structure };
+  })
+);
+
+export const Box = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Box };
+  })
+);
+
+export const Power = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Devices');
+    return { default: m.Power };
+  })
+);
+
+export const Edit = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Edit };
+  })
+);
+
+export const Cog = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Cog };
+  })
+);
+
+export const Nut = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Nut };
+  })
+);
+
+export const Wrench = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Wrench };
+  })
+);
+
+export const Ellipsis = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Ellipsis };
+  })
+);
+
+export const Wand = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Wand };
+  })
+);
+
+export const Check = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Check };
+  })
+);
+
+export const Form = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Form };
+  })
+);
+
+export const BatchDeny = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.BatchDeny };
+  })
+);
+
+export const BatchAccept = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.BatchAccept };
+  })
+);
+
+export const Controls = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Controls };
+  })
+);
+
+export const Plus = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Plus };
+  })
+);
+
+export const CloseAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.CloseAlt };
+  })
+);
+
+export const Cross = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Cross };
+  })
+);
+
+export const Trash = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Trash };
+  })
+);
+
+export const PinAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.PinAlt };
+  })
+);
+
+export const Unpin = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Unpin };
+  })
+);
+
+export const Add = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Add };
+  })
+);
+
+export const Subtract = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Subtract };
+  })
+);
+
+export const Close = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Close };
+  })
+);
+
+export const Delete = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Delete };
+  })
+);
+
+export const Passed = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Passed };
+  })
+);
+
+export const Changed = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Changed };
+  })
+);
+
+export const Failed = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Failed };
+  })
+);
+
+export const Clear = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Clear };
+  })
+);
+
+export const Comment = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Comment };
+  })
+);
+
+export const CommentAdd = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.CommentAdd };
+  })
+);
+
+export const RequestChange = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.RequestChange };
+  })
+);
+
+export const Comments = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Comments };
+  })
+);
+
+export const Chat = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Chat };
+  })
+);
+
+export const Lock = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Lock };
+  })
+);
+
+export const Unlock = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Unlock };
+  })
+);
+
+export const Key = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Key };
+  })
+);
+
+export const Outbox = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Outbox };
+  })
+);
+
+export const Credit = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Credit };
+  })
+);
+
+export const Button = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Button };
+  })
+);
+
+export const Type = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Type };
+  })
+);
+
+export const PointerDefault = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.PointerDefault };
+  })
+);
+
+export const PointerHand = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.PointerHand };
+  })
+);
+
+export const Command = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/CRUD');
+    return { default: m.Command };
+  })
+);
+
+export const Info = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Info };
+  })
+);
+
+export const Question = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Question };
+  })
+);
+
+export const Support = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Support };
+  })
+);
+
+export const Alert = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Alert };
+  })
+);
+
+export const AlertAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.AlertAlt };
+  })
+);
+
+export const Email = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Email };
+  })
+);
+
+export const Phone = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Phone };
+  })
+);
+
+export const Link = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Link };
+  })
+);
+
+export const LinkBroken = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.LinkBroken };
+  })
+);
+
+export const Bell = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Bell };
+  })
+);
+
+export const RSS = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.RSS };
+  })
+);
+
+export const ShareAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.ShareAlt };
+  })
+);
+
+export const Share = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Share };
+  })
+);
+
+export const JumpTo = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.JumpTo };
+  })
+);
+
+export const CircleHollow = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.CircleHollow };
+  })
+);
+
+export const Circle = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Circle };
+  })
+);
+
+export const BookmarkHollow = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.BookmarkHollow };
+  })
+);
+
+export const Bookmark = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Bookmark };
+  })
+);
+
+export const Diamond = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Diamond };
+  })
+);
+
+export const HeartHollow = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.HeartHollow };
+  })
+);
+
+export const Heart = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Heart };
+  })
+);
+
+export const StarHollow = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.StarHollow };
+  })
+);
+
+export const Star = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Star };
+  })
+);
+
+export const Certificate = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Certificate };
+  })
+);
+
+export const Verified = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Verified };
+  })
+);
+
+export const ThumbsUp = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.ThumbsUp };
+  })
+);
+
+export const Shield = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Shield };
+  })
+);
+
+export const Basket = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Basket };
+  })
+);
+
+export const Beaker = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Beaker };
+  })
+);
+
+export const Hourglass = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Hourglass };
+  })
+);
+
+export const Flag = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Flag };
+  })
+);
+
+export const CloudHollow = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.CloudHollow };
+  })
+);
+
+export const Cloud = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Cloud };
+  })
+);
+
+export const Sticker = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Communicate');
+    return { default: m.Sticker };
+  })
+);
+
+export const ChevronUp = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ChevronUp };
+  })
+);
+
+export const ChevronDown = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ChevronDown };
+  })
+);
+
+export const ChevronLeft = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ChevronLeft };
+  })
+);
+
+export const ChevronRight = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ChevronRight };
+  })
+);
+
+export const ArrowUp = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowUp };
+  })
+);
+
+export const ArrowDown = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowDown };
+  })
+);
+
+export const ArrowLeft = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowLeft };
+  })
+);
+
+export const ArrowRight = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowRight };
+  })
+);
+
+export const ArrowSolidUp = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowSolidUp };
+  })
+);
+
+export const ArrowSolidDown = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowSolidDown };
+  })
+);
+
+export const ArrowSolidLeft = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowSolidLeft };
+  })
+);
+
+export const ArrowSolidRight = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ArrowSolidRight };
+  })
+);
+
+export const ExpandAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.ExpandAlt };
+  })
+);
+
+export const Collapse = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Collapse };
+  })
+);
+
+export const Expand = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Expand };
+  })
+);
+
+export const Unfold = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Unfold };
+  })
+);
+
+export const Transfer = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Transfer };
+  })
+);
+
+export const Redirect = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Redirect };
+  })
+);
+
+export const Undo = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Undo };
+  })
+);
+
+export const Reply = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Reply };
+  })
+);
+
+export const Sync = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Sync };
+  })
+);
+
+export const Upload = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Upload };
+  })
+);
+
+export const Download = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Download };
+  })
+);
+
+export const Back = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Back };
+  })
+);
+
+export const Proceed = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Proceed };
+  })
+);
+
+export const Refresh = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Refresh };
+  })
+);
+
+export const Globe = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Globe };
+  })
+);
+
+export const Compass = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Compass };
+  })
+);
+
+export const Location = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Location };
+  })
+);
+
+export const Pin = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Pin };
+  })
+);
+
+export const Time = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Time };
+  })
+);
+
+export const Dashboard = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Dashboard };
+  })
+);
+
+export const Timer = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Timer };
+  })
+);
+
+export const Home = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Home };
+  })
+);
+
+export const Admin = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Admin };
+  })
+);
+
+export const Direction = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/Wayfinding');
+    return { default: m.Direction };
+  })
+);
+
+export const User = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.User };
+  })
+);
+
+export const UserAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.UserAlt };
+  })
+);
+
+export const UserAdd = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.UserAdd };
+  })
+);
+
+export const Users = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.Users };
+  })
+);
+
+export const Profile = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.Profile };
+  })
+);
+
+export const FaceHappy = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.FaceHappy };
+  })
+);
+
+export const FaceNeutral = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.FaceNeutral };
+  })
+);
+
+export const FaceSad = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.FaceSad };
+  })
+);
+
+export const Accessibility = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.Accessibility };
+  })
+);
+
+export const AccessibilityAlt = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/People');
+    return { default: m.AccessibilityAlt };
+  })
+);
diff --git a/src/list.tsx b/src/list.tsx
deleted file mode 100644
index 54fa0ed..0000000
--- a/src/list.tsx
+++ /dev/null
@@ -1,954 +0,0 @@
-import React from 'react';
-import { Photo, Component, Grid, Outline, PhotoDrag, GridAlt, Search, Zoom, ZoomOut, ZoomReset, Eye, EyeClose, Lightning, LightningOff, Contrast, SwitchAlt, Mirror, Grow, PaintBrush, Ruler, Stop, Camera, Video, Speaker, Play, PlayBack, PlayNext, Rewind, FastForward, StopAlt, SideBySide, Stacked, Sun, Moon, } from './groups/Images';
-import { Book, Document, Copy, Category, Folder, Print, GraphLine, Calendar, GraphBar, Menu, MenuReverse, Filter, DocChart, DocList, } from './groups/Documents';
-import { Markup, Bold, Italic, PaperClip, ListOrdered, ListUnordered, Paragraph, Markdown, } from './groups/Editing';
-import { Repo, Commit, Branch, PullRequest, Merge, } from './groups/Git';
-import { Apple, Linux, Ubuntu, Windows, Chrome, } from './groups/OS';
-import { Storybook, AzureDevOps, Bitbucket, Chromatic, ComponentDriven, Discord, Facebook, Figma, GDrive, Github, Gitlab, Google, Graphql, Medium, Redux, Twitter, Youtube, VSCode, Linkedin, } from './groups/Logos';
-import { Browser, Tablet, Mobile, Watch, Sidebar, SidebarAlt, SidebarAltToggle, SidebarToggle, BottomBar, BottomBarToggle, CPU, Database, Memory, Structure, Box, Power, } from './groups/Devices';
-import { Edit, Cog, Nut, Wrench, Ellipsis, Wand, Check, Form, BatchDeny, BatchAccept, Controls, Plus, CloseAlt, Cross, Trash, PinAlt, Unpin, Add, Subtract, Close, Delete, Passed, Changed, Failed, Clear, Comment, CommentAdd, RequestChange, Comments, Chat, Lock, Unlock, Key, Outbox, Credit, Button, Type, PointerDefault, PointerHand, Command, } from './groups/CRUD';
-import { Info, Question, Support, Alert, AlertAlt, Email, Phone, Link, LinkBroken, Bell, RSS, ShareAlt, Share, JumpTo, CircleHollow, Circle, BookmarkHollow, Bookmark, Diamond, HeartHollow, Heart, StarHollow, Star, Certificate, Verified, ThumbsUp, Shield, Basket, Beaker, Hourglass, Flag, CloudHollow, Cloud, Sticker, } from './groups/Communicate';
-import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, ArrowSolidUp, ArrowSolidDown, ArrowSolidLeft, ArrowSolidRight, ExpandAlt, Collapse, Expand, Unfold, Transfer, Redirect, Undo, Reply, Sync, Upload, Download, Back, Proceed, Refresh, Globe, Compass, Location, Pin, Time, Dashboard, Timer, Home, Admin, Direction, } from './groups/Wayfinding';
-import { User, UserAlt, UserAdd, Users, Profile, FaceHappy, FaceNeutral, FaceSad, Accessibility, AccessibilityAlt, } from './groups/People';
-
-export const list = [
-  {
-    name: 'Images',
-    icons: [
-      {
-        name: 'Photo',
-        icon: <Photo />
-      },
-      {
-        name: 'Component',
-        icon: <Component />
-      },
-      {
-        name: 'Grid',
-        icon: <Grid />
-      },
-      {
-        name: 'Outline',
-        icon: <Outline />
-      },
-      {
-        name: 'PhotoDrag',
-        icon: <PhotoDrag />
-      },
-      {
-        name: 'GridAlt',
-        icon: <GridAlt />
-      },
-      {
-        name: 'Search',
-        icon: <Search />
-      },
-      {
-        name: 'Zoom',
-        icon: <Zoom />
-      },
-      {
-        name: 'ZoomOut',
-        icon: <ZoomOut />
-      },
-      {
-        name: 'ZoomReset',
-        icon: <ZoomReset />
-      },
-      {
-        name: 'Eye',
-        icon: <Eye />
-      },
-      {
-        name: 'EyeClose',
-        icon: <EyeClose />
-      },
-      {
-        name: 'Lightning',
-        icon: <Lightning />
-      },
-      {
-        name: 'LightningOff',
-        icon: <LightningOff />
-      },
-      {
-        name: 'Contrast',
-        icon: <Contrast />
-      },
-      {
-        name: 'SwitchAlt',
-        icon: <SwitchAlt />
-      },
-      {
-        name: 'Mirror',
-        icon: <Mirror />
-      },
-      {
-        name: 'Grow',
-        icon: <Grow />
-      },
-      {
-        name: 'PaintBrush',
-        icon: <PaintBrush />
-      },
-      {
-        name: 'Ruler',
-        icon: <Ruler />
-      },
-      {
-        name: 'Stop',
-        icon: <Stop />
-      },
-      {
-        name: 'Camera',
-        icon: <Camera />
-      },
-      {
-        name: 'Video',
-        icon: <Video />
-      },
-      {
-        name: 'Speaker',
-        icon: <Speaker />
-      },
-      {
-        name: 'Play',
-        icon: <Play />
-      },
-      {
-        name: 'PlayBack',
-        icon: <PlayBack />
-      },
-      {
-        name: 'PlayNext',
-        icon: <PlayNext />
-      },
-      {
-        name: 'Rewind',
-        icon: <Rewind />
-      },
-      {
-        name: 'FastForward',
-        icon: <FastForward />
-      },
-      {
-        name: 'StopAlt',
-        icon: <StopAlt />
-      },
-      {
-        name: 'SideBySide',
-        icon: <SideBySide />
-      },
-      {
-        name: 'Stacked',
-        icon: <Stacked />
-      },
-      {
-        name: 'Sun',
-        icon: <Sun />
-      },
-      {
-        name: 'Moon',
-        icon: <Moon />
-      },
-    ]
-  },
-  {
-    name: 'Documents',
-    icons: [
-      {
-        name: 'Book',
-        icon: <Book />
-      },
-      {
-        name: 'Document',
-        icon: <Document />
-      },
-      {
-        name: 'Copy',
-        icon: <Copy />
-      },
-      {
-        name: 'Category',
-        icon: <Category />
-      },
-      {
-        name: 'Folder',
-        icon: <Folder />
-      },
-      {
-        name: 'Print',
-        icon: <Print />
-      },
-      {
-        name: 'GraphLine',
-        icon: <GraphLine />
-      },
-      {
-        name: 'Calendar',
-        icon: <Calendar />
-      },
-      {
-        name: 'GraphBar',
-        icon: <GraphBar />
-      },
-      {
-        name: 'Menu',
-        icon: <Menu />
-      },
-      {
-        name: 'MenuReverse',
-        icon: <MenuReverse />
-      },
-      {
-        name: 'Filter',
-        icon: <Filter />
-      },
-      {
-        name: 'DocChart',
-        icon: <DocChart />
-      },
-      {
-        name: 'DocList',
-        icon: <DocList />
-      },
-    ]
-  },
-  {
-    name: 'Editing',
-    icons: [
-      {
-        name: 'Markup',
-        icon: <Markup />
-      },
-      {
-        name: 'Bold',
-        icon: <Bold />
-      },
-      {
-        name: 'Italic',
-        icon: <Italic />
-      },
-      {
-        name: 'PaperClip',
-        icon: <PaperClip />
-      },
-      {
-        name: 'ListOrdered',
-        icon: <ListOrdered />
-      },
-      {
-        name: 'ListUnordered',
-        icon: <ListUnordered />
-      },
-      {
-        name: 'Paragraph',
-        icon: <Paragraph />
-      },
-      {
-        name: 'Markdown',
-        icon: <Markdown />
-      },
-    ]
-  },
-  {
-    name: 'Git',
-    icons: [
-      {
-        name: 'Repo',
-        icon: <Repo />
-      },
-      {
-        name: 'Commit',
-        icon: <Commit />
-      },
-      {
-        name: 'Branch',
-        icon: <Branch />
-      },
-      {
-        name: 'PullRequest',
-        icon: <PullRequest />
-      },
-      {
-        name: 'Merge',
-        icon: <Merge />
-      },
-    ]
-  },
-  {
-    name: 'OS',
-    icons: [
-      {
-        name: 'Apple',
-        icon: <Apple />
-      },
-      {
-        name: 'Linux',
-        icon: <Linux />
-      },
-      {
-        name: 'Ubuntu',
-        icon: <Ubuntu />
-      },
-      {
-        name: 'Windows',
-        icon: <Windows />
-      },
-      {
-        name: 'Chrome',
-        icon: <Chrome />
-      },
-    ]
-  },
-  {
-    name: 'Logos',
-    icons: [
-      {
-        name: 'Storybook',
-        icon: <Storybook />
-      },
-      {
-        name: 'AzureDevOps',
-        icon: <AzureDevOps />
-      },
-      {
-        name: 'Bitbucket',
-        icon: <Bitbucket />
-      },
-      {
-        name: 'Chromatic',
-        icon: <Chromatic />
-      },
-      {
-        name: 'ComponentDriven',
-        icon: <ComponentDriven />
-      },
-      {
-        name: 'Discord',
-        icon: <Discord />
-      },
-      {
-        name: 'Facebook',
-        icon: <Facebook />
-      },
-      {
-        name: 'Figma',
-        icon: <Figma />
-      },
-      {
-        name: 'GDrive',
-        icon: <GDrive />
-      },
-      {
-        name: 'Github',
-        icon: <Github />
-      },
-      {
-        name: 'Gitlab',
-        icon: <Gitlab />
-      },
-      {
-        name: 'Google',
-        icon: <Google />
-      },
-      {
-        name: 'Graphql',
-        icon: <Graphql />
-      },
-      {
-        name: 'Medium',
-        icon: <Medium />
-      },
-      {
-        name: 'Redux',
-        icon: <Redux />
-      },
-      {
-        name: 'Twitter',
-        icon: <Twitter />
-      },
-      {
-        name: 'Youtube',
-        icon: <Youtube />
-      },
-      {
-        name: 'VSCode',
-        icon: <VSCode />
-      },
-      {
-        name: 'Linkedin',
-        icon: <Linkedin />
-      },
-    ]
-  },
-  {
-    name: 'Devices',
-    icons: [
-      {
-        name: 'Browser',
-        icon: <Browser />
-      },
-      {
-        name: 'Tablet',
-        icon: <Tablet />
-      },
-      {
-        name: 'Mobile',
-        icon: <Mobile />
-      },
-      {
-        name: 'Watch',
-        icon: <Watch />
-      },
-      {
-        name: 'Sidebar',
-        icon: <Sidebar />
-      },
-      {
-        name: 'SidebarAlt',
-        icon: <SidebarAlt />
-      },
-      {
-        name: 'SidebarAltToggle',
-        icon: <SidebarAltToggle />
-      },
-      {
-        name: 'SidebarToggle',
-        icon: <SidebarToggle />
-      },
-      {
-        name: 'BottomBar',
-        icon: <BottomBar />
-      },
-      {
-        name: 'BottomBarToggle',
-        icon: <BottomBarToggle />
-      },
-      {
-        name: 'CPU',
-        icon: <CPU />
-      },
-      {
-        name: 'Database',
-        icon: <Database />
-      },
-      {
-        name: 'Memory',
-        icon: <Memory />
-      },
-      {
-        name: 'Structure',
-        icon: <Structure />
-      },
-      {
-        name: 'Box',
-        icon: <Box />
-      },
-      {
-        name: 'Power',
-        icon: <Power />
-      },
-    ]
-  },
-  {
-    name: 'CRUD',
-    icons: [
-      {
-        name: 'Edit',
-        icon: <Edit />
-      },
-      {
-        name: 'Cog',
-        icon: <Cog />
-      },
-      {
-        name: 'Nut',
-        icon: <Nut />
-      },
-      {
-        name: 'Wrench',
-        icon: <Wrench />
-      },
-      {
-        name: 'Ellipsis',
-        icon: <Ellipsis />
-      },
-      {
-        name: 'Wand',
-        icon: <Wand />
-      },
-      {
-        name: 'Check',
-        icon: <Check />
-      },
-      {
-        name: 'Form',
-        icon: <Form />
-      },
-      {
-        name: 'BatchDeny',
-        icon: <BatchDeny />
-      },
-      {
-        name: 'BatchAccept',
-        icon: <BatchAccept />
-      },
-      {
-        name: 'Controls',
-        icon: <Controls />
-      },
-      {
-        name: 'Plus',
-        icon: <Plus />
-      },
-      {
-        name: 'CloseAlt',
-        icon: <CloseAlt />
-      },
-      {
-        name: 'Cross',
-        icon: <Cross />
-      },
-      {
-        name: 'Trash',
-        icon: <Trash />
-      },
-      {
-        name: 'PinAlt',
-        icon: <PinAlt />
-      },
-      {
-        name: 'Unpin',
-        icon: <Unpin />
-      },
-      {
-        name: 'Add',
-        icon: <Add />
-      },
-      {
-        name: 'Subtract',
-        icon: <Subtract />
-      },
-      {
-        name: 'Close',
-        icon: <Close />
-      },
-      {
-        name: 'Delete',
-        icon: <Delete />
-      },
-      {
-        name: 'Passed',
-        icon: <Passed />
-      },
-      {
-        name: 'Changed',
-        icon: <Changed />
-      },
-      {
-        name: 'Failed',
-        icon: <Failed />
-      },
-      {
-        name: 'Clear',
-        icon: <Clear />
-      },
-      {
-        name: 'Comment',
-        icon: <Comment />
-      },
-      {
-        name: 'CommentAdd',
-        icon: <CommentAdd />
-      },
-      {
-        name: 'RequestChange',
-        icon: <RequestChange />
-      },
-      {
-        name: 'Comments',
-        icon: <Comments />
-      },
-      {
-        name: 'Chat',
-        icon: <Chat />
-      },
-      {
-        name: 'Lock',
-        icon: <Lock />
-      },
-      {
-        name: 'Unlock',
-        icon: <Unlock />
-      },
-      {
-        name: 'Key',
-        icon: <Key />
-      },
-      {
-        name: 'Outbox',
-        icon: <Outbox />
-      },
-      {
-        name: 'Credit',
-        icon: <Credit />
-      },
-      {
-        name: 'Button',
-        icon: <Button />
-      },
-      {
-        name: 'Type',
-        icon: <Type />
-      },
-      {
-        name: 'PointerDefault',
-        icon: <PointerDefault />
-      },
-      {
-        name: 'PointerHand',
-        icon: <PointerHand />
-      },
-      {
-        name: 'Command',
-        icon: <Command />
-      },
-    ]
-  },
-  {
-    name: 'Communicate',
-    icons: [
-      {
-        name: 'Info',
-        icon: <Info />
-      },
-      {
-        name: 'Question',
-        icon: <Question />
-      },
-      {
-        name: 'Support',
-        icon: <Support />
-      },
-      {
-        name: 'Alert',
-        icon: <Alert />
-      },
-      {
-        name: 'AlertAlt',
-        icon: <AlertAlt />
-      },
-      {
-        name: 'Email',
-        icon: <Email />
-      },
-      {
-        name: 'Phone',
-        icon: <Phone />
-      },
-      {
-        name: 'Link',
-        icon: <Link />
-      },
-      {
-        name: 'LinkBroken',
-        icon: <LinkBroken />
-      },
-      {
-        name: 'Bell',
-        icon: <Bell />
-      },
-      {
-        name: 'RSS',
-        icon: <RSS />
-      },
-      {
-        name: 'ShareAlt',
-        icon: <ShareAlt />
-      },
-      {
-        name: 'Share',
-        icon: <Share />
-      },
-      {
-        name: 'JumpTo',
-        icon: <JumpTo />
-      },
-      {
-        name: 'CircleHollow',
-        icon: <CircleHollow />
-      },
-      {
-        name: 'Circle',
-        icon: <Circle />
-      },
-      {
-        name: 'BookmarkHollow',
-        icon: <BookmarkHollow />
-      },
-      {
-        name: 'Bookmark',
-        icon: <Bookmark />
-      },
-      {
-        name: 'Diamond',
-        icon: <Diamond />
-      },
-      {
-        name: 'HeartHollow',
-        icon: <HeartHollow />
-      },
-      {
-        name: 'Heart',
-        icon: <Heart />
-      },
-      {
-        name: 'StarHollow',
-        icon: <StarHollow />
-      },
-      {
-        name: 'Star',
-        icon: <Star />
-      },
-      {
-        name: 'Certificate',
-        icon: <Certificate />
-      },
-      {
-        name: 'Verified',
-        icon: <Verified />
-      },
-      {
-        name: 'ThumbsUp',
-        icon: <ThumbsUp />
-      },
-      {
-        name: 'Shield',
-        icon: <Shield />
-      },
-      {
-        name: 'Basket',
-        icon: <Basket />
-      },
-      {
-        name: 'Beaker',
-        icon: <Beaker />
-      },
-      {
-        name: 'Hourglass',
-        icon: <Hourglass />
-      },
-      {
-        name: 'Flag',
-        icon: <Flag />
-      },
-      {
-        name: 'CloudHollow',
-        icon: <CloudHollow />
-      },
-      {
-        name: 'Cloud',
-        icon: <Cloud />
-      },
-      {
-        name: 'Sticker',
-        icon: <Sticker />
-      },
-    ]
-  },
-  {
-    name: 'Wayfinding',
-    icons: [
-      {
-        name: 'ChevronUp',
-        icon: <ChevronUp />
-      },
-      {
-        name: 'ChevronDown',
-        icon: <ChevronDown />
-      },
-      {
-        name: 'ChevronLeft',
-        icon: <ChevronLeft />
-      },
-      {
-        name: 'ChevronRight',
-        icon: <ChevronRight />
-      },
-      {
-        name: 'ArrowUp',
-        icon: <ArrowUp />
-      },
-      {
-        name: 'ArrowDown',
-        icon: <ArrowDown />
-      },
-      {
-        name: 'ArrowLeft',
-        icon: <ArrowLeft />
-      },
-      {
-        name: 'ArrowRight',
-        icon: <ArrowRight />
-      },
-      {
-        name: 'ArrowSolidUp',
-        icon: <ArrowSolidUp />
-      },
-      {
-        name: 'ArrowSolidDown',
-        icon: <ArrowSolidDown />
-      },
-      {
-        name: 'ArrowSolidLeft',
-        icon: <ArrowSolidLeft />
-      },
-      {
-        name: 'ArrowSolidRight',
-        icon: <ArrowSolidRight />
-      },
-      {
-        name: 'ExpandAlt',
-        icon: <ExpandAlt />
-      },
-      {
-        name: 'Collapse',
-        icon: <Collapse />
-      },
-      {
-        name: 'Expand',
-        icon: <Expand />
-      },
-      {
-        name: 'Unfold',
-        icon: <Unfold />
-      },
-      {
-        name: 'Transfer',
-        icon: <Transfer />
-      },
-      {
-        name: 'Redirect',
-        icon: <Redirect />
-      },
-      {
-        name: 'Undo',
-        icon: <Undo />
-      },
-      {
-        name: 'Reply',
-        icon: <Reply />
-      },
-      {
-        name: 'Sync',
-        icon: <Sync />
-      },
-      {
-        name: 'Upload',
-        icon: <Upload />
-      },
-      {
-        name: 'Download',
-        icon: <Download />
-      },
-      {
-        name: 'Back',
-        icon: <Back />
-      },
-      {
-        name: 'Proceed',
-        icon: <Proceed />
-      },
-      {
-        name: 'Refresh',
-        icon: <Refresh />
-      },
-      {
-        name: 'Globe',
-        icon: <Globe />
-      },
-      {
-        name: 'Compass',
-        icon: <Compass />
-      },
-      {
-        name: 'Location',
-        icon: <Location />
-      },
-      {
-        name: 'Pin',
-        icon: <Pin />
-      },
-      {
-        name: 'Time',
-        icon: <Time />
-      },
-      {
-        name: 'Dashboard',
-        icon: <Dashboard />
-      },
-      {
-        name: 'Timer',
-        icon: <Timer />
-      },
-      {
-        name: 'Home',
-        icon: <Home />
-      },
-      {
-        name: 'Admin',
-        icon: <Admin />
-      },
-      {
-        name: 'Direction',
-        icon: <Direction />
-      },
-    ]
-  },
-  {
-    name: 'People',
-    icons: [
-      {
-        name: 'User',
-        icon: <User />
-      },
-      {
-        name: 'UserAlt',
-        icon: <UserAlt />
-      },
-      {
-        name: 'UserAdd',
-        icon: <UserAdd />
-      },
-      {
-        name: 'Users',
-        icon: <Users />
-      },
-      {
-        name: 'Profile',
-        icon: <Profile />
-      },
-      {
-        name: 'FaceHappy',
-        icon: <FaceHappy />
-      },
-      {
-        name: 'FaceNeutral',
-        icon: <FaceNeutral />
-      },
-      {
-        name: 'FaceSad',
-        icon: <FaceSad />
-      },
-      {
-        name: 'Accessibility',
-        icon: <Accessibility />
-      },
-      {
-        name: 'AccessibilityAlt',
-        icon: <AccessibilityAlt />
-      },
-    ]
-  },
-];
diff --git a/src/utils/createIndex.ts b/src/utils/createIndex.ts
index b8fe1e1..f692fb2 100644
--- a/src/utils/createIndex.ts
+++ b/src/utils/createIndex.ts
@@ -26,7 +26,9 @@ export const createIndex = ({
   });
 
   const imports = `import { lazy } from 'react';
-import { withSuspense } from './utils/withSuspense';`;
+import { withSuspense } from './utils/withSuspense';
+
+export { iconList } from './iconList';`;
   indexContent += imports + os.EOL + os.EOL;
 
   listWithGroup.forEach((component) => {
@@ -34,10 +36,13 @@ import { withSuspense } from './utils/withSuspense';`;
     const componentName = toPascalCase(component.name);
 
     // Export statement
-    const componentExport = `export const ${componentName} = withSuspense(lazy(async () => {
-  const m = await import('./groups/${component.groupName}');
-  return { default: m.${componentName} };
-}));`;
+    const componentExport = `export const ${componentName} = withSuspense(
+  lazy(async () => {
+    const m = await import('./groups/${component.groupName}');
+    return { default: m.${componentName} };
+  })
+);
+`;
 
     indexContent += componentExport + os.EOL;
   });
diff --git a/src/utils/createList.ts b/src/utils/createList.ts
index cae8df8..b53c047 100644
--- a/src/utils/createList.ts
+++ b/src/utils/createList.ts
@@ -12,8 +12,7 @@ export const createList = ({
   downloadedSVGsData: any;
   indexDirectoryPath: string;
 }) => {
-  let imports = `import React from 'react';` + os.EOL;
-  let listContent = `export const list = [` + os.EOL;
+  let listContent = `export const iconList = [` + os.EOL;
   const groupWithComponentsNames = groupsWithComponents.map(
     (group: { name: any; components: any[] }) => ({
       name: group.name,
@@ -28,20 +27,6 @@ export const createList = ({
     })
   );
 
-  const namedImports = groupWithComponentsNames.map((group: any) => {
-    const groupName = toPascalCase(group.name);
-    let components = ``;
-    group.components.forEach(
-      (component: any) => (components += `${component}, `)
-    );
-
-    return `import { ${components}} from './groups/${groupName}';`;
-  });
-
-  imports += namedImports.join(os.EOL) + os.EOL + os.EOL;
-
-  console.log(namedImports);
-
   groupWithComponentsNames.forEach(
     (group: { name: any; components: any[] }) => {
       listContent += `  {
@@ -49,11 +34,7 @@ export const createList = ({
     icons: [
 `;
       group.components.forEach((component: any) => {
-        listContent +=
-          `      {
-        name: '${component}',
-        icon: <${component} />
-      },` + os.EOL;
+        listContent += `      '${component}',` + os.EOL;
       });
 
       listContent += `    ]
@@ -68,7 +49,7 @@ export const createList = ({
 
   // Write the content to file system
   fs.writeFileSync(
-    path.resolve(indexDirectoryPath, 'list.tsx'),
-    imports + listContent
+    path.resolve(indexDirectoryPath, 'iconList.tsx'),
+    listContent
   );
 };
diff --git a/svgr.config.js b/svgr.config.js
index 9626bf1..f6d6419 100644
--- a/svgr.config.js
+++ b/svgr.config.js
@@ -9,6 +9,7 @@ module.exports = {
   },
   replaceAttrValues: {
     '#000': 'currentColor',
+    inherit: '100%',
   },
   plugins: [
     // Clean SVG files using SVGO