diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 5016f59..490843e 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import { Card, CardVariant } from 'components/Card/Card';
 import { Icon } from 'components/Icon/Icon';
 import { IconButton } from 'components/IconButton/IconButton';
-import { ArrowDropdownDownIcon } from 'components/Icons/ArrowDropdownDownIcon';
 import { useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index bb3e42a..953063f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -72,7 +72,7 @@ export const Button: React.FC<ButtonProps> = ({
         </div>
       </div>
       {variant === 'spotlight' && spotlightActive && (
-        <div className='ui-bg-primary w-full ui-rounded ui-h-[2px] ui-w-full ui-absolute ui-bottom-1'></div>
+        <div className='ui-bg-primary w-full ui-rounded ui-h-[2px] ui-w-full ui-absolute ui-bottom-1' />
       )}
     </button>
   );
diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
index cbdcba2..d37b1e8 100644
--- a/src/components/Carousel/Carousel.tsx
+++ b/src/components/Carousel/Carousel.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import ArrowLeftIcon from 'components/Icons/ArrowLeftIcon';
-import ArrowRightIcon from 'components/Icons/ArrowRightIcon';
+import { Icon } from 'components/Icon/Icon';
 import {
   cloneElement,
   HTMLAttributes,
@@ -140,7 +139,7 @@ export function Carousel({
             size='sm'
             onClick={handlePrev}
           >
-            <ArrowLeftIcon active />
+            <Icon className='ui-text-primary' name='Left' />
           </IconButton>
           <IconButton
             rounded
@@ -152,7 +151,7 @@ export function Carousel({
             size='sm'
             onClick={handleNext}
           >
-            <ArrowRightIcon active />
+            <Icon className='ui-text-primary' name='Right' />
           </IconButton>
         </>
       )}
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index c29ccb7..282662a 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { Card } from 'components/Card/Card';
-import CloseIcon from 'components/Icons/CloseIcon';
+import { Icon } from 'components/Icon/Icon';
 import { useOnClickOutside } from 'hooks/useOnClickOutside';
 import React, { useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -58,8 +58,9 @@ export const Dialog: React.FC<DialogProps> = ({
           )}
         >
           {!hideCloseIcon && (
-            <CloseIcon
-              className='ui-absolute ui-top-4 ui-right-4 ui-text-xl ui-cursor-pointer'
+            <Icon
+              className='ui-absolute ui-top-4 ui-right-4 ui-cursor-pointer'
+              name='Small-Cross'
               onClick={onClose}
             />
           )}
diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx
index 089d7dc..d98f3d1 100644
--- a/src/components/ExternalLink/ExternalLink.tsx
+++ b/src/components/ExternalLink/ExternalLink.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ArrowLinkOffIcon } from 'components/Icons/ArrowLinkOffIcon';
+import { Icon } from 'components/Icon/Icon';
 
 export interface ExternalLinkProps {
   className?: string;
@@ -30,7 +30,7 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({
       target='_blank'
     >
       {text}
-      {!withoutIcon && <ArrowLinkOffIcon />}
+      {!withoutIcon && <Icon className='ui-ml-1' name='Link-off' />}
     </a>
   );
 };
diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
index 161a8c3..d4c72c3 100644
--- a/src/components/IconButton/IconButton.stories.tsx
+++ b/src/components/IconButton/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import CloseIcon from '../Icons/CloseIcon';
+import { Icon } from '../Icon/Icon';
 import { IconButton } from './IconButton';
 
 export default {
@@ -11,7 +11,7 @@ export default {
 
 const Template: ComponentStory<typeof IconButton> = (args) => (
   <IconButton {...args}>
-    <CloseIcon />
+    <Icon name='Small-Cross' />
   </IconButton>
 );
 
diff --git a/src/components/Icons/ArrowDropdownDownIcon.tsx b/src/components/Icons/ArrowDropdownDownIcon.tsx
deleted file mode 100644
index 8c32bca..0000000
--- a/src/components/Icons/ArrowDropdownDownIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SVGIconProps } from './types';
-
-export const ArrowDropdownDownIcon = ({ onClick, className }: SVGIconProps) => (
-  <svg
-    className={className}
-    fill='none'
-    height='24'
-    viewBox='0 0 24 24'
-    width='24'
-    xmlns='http://www.w3.org/2000/svg'
-    onClick={onClick}
-  >
-    <path
-      d='M16 10L12 14L8 10'
-      stroke='white'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth='2'
-    />
-  </svg>
-);
diff --git a/src/components/Icons/ArrowDropdownLeftIcon.tsx b/src/components/Icons/ArrowDropdownLeftIcon.tsx
deleted file mode 100644
index ec359f8..0000000
--- a/src/components/Icons/ArrowDropdownLeftIcon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { SVGIconProps } from './types';
-
-export default function ArrowDropdownLeftIcon({ active, onClick, className }: SVGIconProps) {
-  return (
-    <svg
-      className={className}
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        d='M14 16L10 12L14 8'
-        stroke={active ? 'var(--color-primary)' : 'white'}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-    </svg>
-  );
-}
diff --git a/src/components/Icons/ArrowDropdownRightIcon.tsx b/src/components/Icons/ArrowDropdownRightIcon.tsx
deleted file mode 100644
index 679ee10..0000000
--- a/src/components/Icons/ArrowDropdownRightIcon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { SVGIconProps } from './types';
-
-export default function ArrowDropdownRightIcon({ active, onClick, className }: SVGIconProps) {
-  return (
-    <svg
-      className={className}
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        d='M10 8L14 12L10 16'
-        stroke={active ? 'var(--color-primary)' : 'white'}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-    </svg>
-  );
-}
diff --git a/src/components/Icons/ArrowLeftIcon.tsx b/src/components/Icons/ArrowLeftIcon.tsx
deleted file mode 100644
index a106b97..0000000
--- a/src/components/Icons/ArrowLeftIcon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { SVGIconProps } from './types';
-
-export default function ArrowLeftIcon({ active, onClick }: SVGIconProps) {
-  return (
-    <svg
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        d='M11 16L7 12L11 8'
-        stroke={active ? 'var(--color-primary)' : 'white'}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-      <path
-        d='M7 12H17.3291'
-        stroke={active ? 'var(--color-primary)' : 'white'}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-    </svg>
-  );
-}
diff --git a/src/components/Icons/ArrowLinkOffIcon.tsx b/src/components/Icons/ArrowLinkOffIcon.tsx
deleted file mode 100644
index edb5004..0000000
--- a/src/components/Icons/ArrowLinkOffIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { SVGIconProps } from './types';
-
-export const ArrowLinkOffIcon = ({ onClick, className }: SVGIconProps) => {
-  return (
-    <svg
-      className={className}
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        d='M10.7322 8.11133H16.389V13.7682'
-        stroke='var(--color-primary)'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-      <path
-        d='M16.3891 8.11129L9.08534 15.4151'
-        stroke='var(--color-primary)'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-    </svg>
-  );
-};
diff --git a/src/components/Icons/ArrowRightIcon.tsx b/src/components/Icons/ArrowRightIcon.tsx
deleted file mode 100644
index 3b15768..0000000
--- a/src/components/Icons/ArrowRightIcon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { SVGIconProps } from './types';
-
-export default function ArrowRightIcon({ active, onClick }: SVGIconProps) {
-  return (
-    <svg
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        d='M14 8L18 12L14 16'
-        stroke='var(--color-primary)'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-      <path
-        d='M18 12L7.6709 12'
-        stroke='var(--color-primary)'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='2'
-      />
-    </svg>
-  );
-}
diff --git a/src/components/Icons/CloseIcon.tsx b/src/components/Icons/CloseIcon.tsx
deleted file mode 100644
index d8be7cb..0000000
--- a/src/components/Icons/CloseIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-import { SVGIconProps } from './types';
-
-export default function CloseIcon({ onClick, className }: SVGIconProps) {
-  return (
-    <svg
-      className={className}
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        clipRule='evenodd'
-        d='M16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289Z'
-        fill='white'
-        fillRule='evenodd'
-      />
-      <path
-        clipRule='evenodd'
-        d='M7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289Z'
-        fill='white'
-        fillRule='evenodd'
-      />
-    </svg>
-  );
-}
diff --git a/src/components/Icons/SkipLeftIcon.tsx b/src/components/Icons/SkipLeftIcon.tsx
deleted file mode 100644
index dcaaa5f..0000000
--- a/src/components/Icons/SkipLeftIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { SVGIconProps } from './types';
-
-export default function SkipLeftIcon({ active, onClick, className }: SVGIconProps) {
-  return (
-    <svg
-      className={className}
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        clipRule='evenodd'
-        d='M15.7071 16.7071C15.3166 17.0976 14.6834 17.0976 14.2929 16.7071L10.2929 12.7071C9.90237 12.3166 9.90237 11.6834 10.2929 11.2929L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L12.4142 12L15.7071 15.2929C16.0976 15.6834 16.0976 16.3166 15.7071 16.7071Z'
-        fill={active ? 'var(--color-primary)' : 'white'}
-        fillRule='evenodd'
-      />
-      <rect
-        fill={active ? 'var(--color-primary)' : 'white'}
-        height='10'
-        rx='1'
-        width='2'
-        x='7'
-        y='7'
-      />
-    </svg>
-  );
-}
diff --git a/src/components/Icons/SkipRightIcon.tsx b/src/components/Icons/SkipRightIcon.tsx
deleted file mode 100644
index f4f3e8d..0000000
--- a/src/components/Icons/SkipRightIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { SVGIconProps } from './types';
-
-export default function SkipRightIcon({ active, onClick, className }: SVGIconProps) {
-  return (
-    <svg
-      className={className}
-      fill='none'
-      height='24'
-      viewBox='0 0 24 24'
-      width='24'
-      xmlns='http://www.w3.org/2000/svg'
-      onClick={onClick}
-    >
-      <path
-        clipRule='evenodd'
-        d='M8.29289 7.29289C8.68342 6.90237 9.31658 6.90237 9.70711 7.29289L13.7071 11.2929C14.0976 11.6834 14.0976 12.3166 13.7071 12.7071L9.70711 16.7071C9.31658 17.0976 8.68342 17.0976 8.29289 16.7071C7.90237 16.3166 7.90237 15.6834 8.29289 15.2929L11.5858 12L8.29289 8.70711C7.90237 8.31658 7.90237 7.68342 8.29289 7.29289Z'
-        fill={active ? 'var(--color-primary)' : 'white'}
-        fillRule='evenodd'
-      />
-      <rect
-        fill={active ? 'var(--color-primary)' : 'white'}
-        height='10'
-        rx='1'
-        transform='rotate(-180 17 17)'
-        width='2'
-        x='17'
-        y='17'
-      />
-    </svg>
-  );
-}
diff --git a/src/components/Icons/types.ts b/src/components/Icons/types.ts
deleted file mode 100644
index 301cd09..0000000
--- a/src/components/Icons/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface SVGIconProps {
-  active?: boolean;
-  onClick?: () => void;
-  className?: string;
-}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 7965f94..026baaf 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,8 +1,5 @@
 import clsx from 'clsx';
-import ArrowDropdownLeftIcon from 'components/Icons/ArrowDropdownLeftIcon';
-import ArrowDropdownRightIcon from 'components/Icons/ArrowDropdownRightIcon';
-import SkipLeftIcon from 'components/Icons/SkipLeftIcon';
-import SkipRightIcon from 'components/Icons/SkipRightIcon';
+import { Icon } from 'components/Icon/Icon';
 
 export interface PaginationLocalization {
   of?: string;
@@ -38,34 +35,46 @@ export const Pagination: React.FC<PaginationProps> = ({
   return (
     <div
       className={clsx(
-        'ui-flex ui-justify-around ui-items-center ui-gap-5 ui-max-w-[350px]',
+        'ui-flex ui-text-white ui-justify-around ui-items-center ui-gap-5 ui-max-w-[350px]',
         className
       )}
     >
-      <SkipLeftIcon
-        active={pageIndex !== 0}
-        className='ui-cursor-pointer'
+      <Icon
+        className={clsx({
+          'ui-cursor-pointer ui-text-primary hover:ui-text-blue-light-2': pageIndex !== 0
+        })}
+        name='Left-3'
         onClick={() => gotoPage(0)}
       />
-      <ArrowDropdownLeftIcon
-        active={pageIndex !== 0}
-        className='ui-cursor-pointer'
+
+      <Icon
+        className={clsx({
+          'ui-cursor-pointer ui-text-primary hover:ui-text-blue-light-2': pageIndex !== 0
+        })}
+        name='Left-4'
         onClick={() => gotoPage(Math.max(pageIndex - 1, 0))}
       />
+
       <h6 className='ui-tg-caption ui-text-gray-500 ui-select-none'>
         {startIndex + 1}-{endIndex}
         &nbsp;
         {localization.of}&nbsp;
         {length}
       </h6>
-      <ArrowDropdownRightIcon
-        active={canNextPage}
-        className='ui-cursor-pointer'
+
+      <Icon
+        className={clsx({
+          'ui-cursor-pointer ui-text-primary hover:ui-text-blue-light-2': canNextPage
+        })}
+        name='Right-4'
         onClick={() => canNextPage && gotoPage(pageIndex + 1)}
       />
-      <SkipRightIcon
-        active={canNextPage}
-        className='ui-cursor-pointer'
+
+      <Icon
+        className={clsx({
+          'ui-cursor-pointer ui-text-primary hover:ui-text-blue-light-2': canNextPage
+        })}
+        name='Right-3'
         onClick={() => gotoPage(pageCount - 1)}
       />
     </div>
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index cfcbd5b..b85af4e 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { FieldAttributes, FieldAttributesProps } from 'components/FieldAttributes/FieldAttributes';
-import { ArrowDropdownDownIcon } from 'components/Icons/ArrowDropdownDownIcon';
+import { Icon } from 'components/Icon/Icon';
 import { useOnClickOutside } from 'hooks/useOnClickOutside';
 import { ReactElement, useMemo, useRef, useState } from 'react';
 import { Option } from 'types/option';
@@ -86,10 +86,11 @@ export const Select = <T,>({
       >
         {value ? label : <span className='ui-text-black-300'>{placeholder}</span>}
 
-        <ArrowDropdownDownIcon
+        <Icon
           className={clsx('ui-transition-transform ui-text-black-200 dark:ui-text-white', {
             'ui-transform ui-rotate-180 ': isOpen
           })}
+          name='Bottom-3'
         />
         {isOpen && (
           <div
diff --git a/src/components/Selector/Selector.stories.tsx b/src/components/Selector/Selector.stories.tsx
index f09a0d6..b866925 100644
--- a/src/components/Selector/Selector.stories.tsx
+++ b/src/components/Selector/Selector.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CloseIcon from 'components/Icons/CloseIcon';
 
+import { Icon } from '../Icon/Icon';
 import { Selector } from './Selector';
 
 export default {
@@ -17,7 +17,7 @@ Primary.args = {
   text: (
     <>
       Action
-      <CloseIcon className='' />
+      <Icon className='ui-text-white ui-ml-2' name='Small-Cross' />
     </>
   )
 };
diff --git a/src/components/Selector/Selector.tsx b/src/components/Selector/Selector.tsx
index 5954bd2..9471396 100644
--- a/src/components/Selector/Selector.tsx
+++ b/src/components/Selector/Selector.tsx
@@ -10,7 +10,7 @@ export type SelectorProps = {
 export const Selector: React.FC<SelectorProps> = ({ text, onClick, className }) => (
   <button
     className={clsx(
-      'ui-flex ui-gap-2 ui-items-center ui-bg-dark-blue ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded ui-text-primary ui-px-2.5 ui-py-2 ui-whitespace-nowrap',
+      'ui-flex ui-items-center ui-justify-center ui-bg-dark-blue ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded ui-text-primary ui-px-2.5 ui-py-2 ui-whitespace-nowrap',
       className
     )}
     type='button'
diff --git a/src/components/Icons/TxState.tsx b/src/context/TransactionLogo.tsx
similarity index 98%
rename from src/components/Icons/TxState.tsx
rename to src/context/TransactionLogo.tsx
index 0b37aeb..b78a197 100644
--- a/src/components/Icons/TxState.tsx
+++ b/src/context/TransactionLogo.tsx
@@ -1,6 +1,6 @@
-import { TxState } from 'context/useTransactionDialogContext';
+import { TxState } from './useTransactionDialogContext';
 
-export default function TxStateSvg({ txState }: Record<'txState', TxState>) {
+export const TransactionLogo = ({ txState }: Record<'txState', TxState>) => {
   if (txState === 'signing') {
     return (
       <svg
@@ -278,4 +278,4 @@ export default function TxStateSvg({ txState }: Record<'txState', TxState>) {
       </defs>
     </svg>
   );
-}
+};
diff --git a/src/context/useTransactionDialogContext.tsx b/src/context/useTransactionDialogContext.tsx
index 51561a7..48afbe6 100644
--- a/src/context/useTransactionDialogContext.tsx
+++ b/src/context/useTransactionDialogContext.tsx
@@ -1,6 +1,5 @@
 import { TransactionNotifier } from '@synthetixio/transaction-notifier';
 import { Dialog, Spinner } from 'components';
-import TxStateSvg from 'components/Icons/TxState';
 import { providers } from 'ethers';
 import {
   createContext,
@@ -12,6 +11,8 @@ import {
   useState
 } from 'react';
 
+import { TransactionLogo } from './TransactionLogo';
+
 export type TxState = 'signing' | 'mining' | 'failed' | 'confirmed' | 'error';
 
 interface TransactionDialogContextType {
@@ -90,7 +91,7 @@ const TransactionDialogContextProvider: React.FC<{
     >
       <Dialog disableClose open={visible} onClose={() => setVisible(false)}>
         <div className='ui-flex ui-flex-col ui-items-center'>
-          <TxStateSvg txState={state} />
+          <TransactionLogo txState={state} />
           <h4 className='ui-tg-title-h4'>{stateText[state].tile}</h4>
           <span className='ui-tg-caption ui-text-center ui-text-gray-500'>
             {stateText[state].subline}