diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
index 98ef4a5..2f5846a 100644
--- a/web/src/Components/Bridging/BridgeContainer.tsx
+++ b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -76,7 +76,20 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   }
 
   return (
-    <div style={{ display: 'flex', overflow: 'auto' }}>
+    <div style={{ overflow: 'auto' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: 'white',
+          overflow: 'auto',
+          padding: '0.5rem',
+          borderRadius: '0.5rem',
+        }}
+      >
+        <CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
+      </div>
       <InputContainer
         mode={mode}
         onBridgeOptionChange={onBridgeOptionChange}
@@ -87,10 +100,6 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
         bridgeValueVariant={bridgeValueVariant}
         bridgeValueHelperText={bridgeValueHelperText}
       />
-      <div style={{ display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
-        <CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
-        <DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
-      </div>
     </div>
   )
 }
diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
index 62a28a8..8b035b1 100644
--- a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
+++ b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -34,42 +34,44 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge
   }
 
   return (
-    <div style={{ backgroundColor: 'white', borderRadius: '0.5rem' }}>
-      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={980} height={500}>
-        {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
-        <defs>
-          <linearGradient id='particleArea'>
-            <stop offset={particleFromPercentage} stopColor='transparent' />
-            <stop offset={particleFromPercentage} stopColor='#E2DCDC' />
-            <stop offset={particleToPercentage} stopColor='#E2DCDC' />
-            <stop offset={particleToPercentage} stopColor='transparent' />
-          </linearGradient>
-        </defs>
-        <CartesianGrid strokeDasharray='3 3' />
-        <XAxis
-          dataKey='size'
-          scale='log'
-          domain={[0.1, 10000]}
-          type='number'
-          ticks={[0.1, 1, 10, 100, 1000, 10000]}
-          label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
-          height={70}
-        />
-        <YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
-        <Tooltip />
-        <Legend verticalAlign='bottom' align='center' />
-        {Object.entries(bridges).map(([name, cumulative], index) => (
-          <Area
-            type='monotone'
-            dataKey={name}
-            stroke={graphColors[index % graphColors.length]}
-            key={name}
-            fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
-            name={name}
-            strokeWidth={1.5}
+    <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
+      <ResponsiveContainer width={'99%'} height={500}>
+        <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+          {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
+          <defs>
+            <linearGradient id='particleArea'>
+              <stop offset={particleFromPercentage} stopColor='transparent' />
+              <stop offset={particleFromPercentage} stopColor='#E2DCDC' />
+              <stop offset={particleToPercentage} stopColor='#E2DCDC' />
+              <stop offset={particleToPercentage} stopColor='transparent' />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray='3 3' />
+          <XAxis
+            dataKey='size'
+            scale='log'
+            domain={[0.1, 10000]}
+            type='number'
+            ticks={[0.1, 1, 10, 100, 1000, 10000]}
+            label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
+            height={70}
           />
-        ))}
-      </AreaChart>
+          <YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
+          <Tooltip />
+          <Legend verticalAlign='bottom' align='center' />
+          {Object.entries(bridges).map(([name, cumulative], index) => (
+            <Area
+              type='monotone'
+              dataKey={name}
+              stroke={graphColors[index % graphColors.length]}
+              key={name}
+              fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
+              name={name}
+              strokeWidth={1.5}
+            />
+          ))}
+        </AreaChart>
+      </ResponsiveContainer>
     </div>
   )
 }
diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx
index 19e4a38..116c2af 100644
--- a/web/src/Components/Bridging/InputContainer.tsx
+++ b/web/src/Components/Bridging/InputContainer.tsx
@@ -1,4 +1,4 @@
-import { Radio, TextField, Tooltip, Typography } from '@equinor/eds-core-react'
+import { NativeSelect, Radio, TextField, Tooltip, Typography } from '@equinor/eds-core-react'
 import { InputWrapper, RadioWrapper, StyledSelect } from './styles'
 import { BridgingOption, CeramicDiscsValues } from '../../Enums'
 import { findDValue } from '../../Utils'
@@ -27,7 +27,15 @@ const InputContainer = ({
   bridgeValueHelperText,
 }: InputContainerProps) => {
   return (
-    <div style={{ backgroundColor: 'white', borderRadius: '4px', padding: '0.5rem' }}>
+    <div
+      style={{
+        backgroundColor: 'white',
+        borderRadius: '0.5rem',
+        padding: '0.5rem',
+        marginBlockStart: '1rem',
+        display: 'flex',
+      }}
+    >
       <InputWrapper>
         <Typography variant='h3'>Bridging options</Typography>
         <span>Bridging based on:</span>
@@ -70,8 +78,12 @@ const InputContainer = ({
         <div style={{ width: '150px' }}>
           {mode === BridgingOption.CERAMIC_DISCS ? (
             <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <label>Ceramic Discs Size</label>
-              <StyledSelect onChange={event => onBridgeValueChange(event.target.value)}>
+              <label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label>
+              <NativeSelect
+                onChange={event => onBridgeValueChange(event.target.value)}
+                id={'ceramic-disk-selector'}
+                label={''}
+              >
                 {CeramicDiscsValues.map((value, index) => {
                   return (
                     <option value={value} key={index + value}>
@@ -79,7 +91,7 @@ const InputContainer = ({
                     </option>
                   )
                 })}
-              </StyledSelect>
+              </NativeSelect>
               <small style={{ alignSelf: 'flex-end' }}>microns</small>
             </div>
           ) : (
@@ -97,7 +109,7 @@ const InputContainer = ({
         </div>
       </InputWrapper>
       {optimalBridgeGraphData.length > 0 && (
-        <div style={{ marginBlockStart: '3rem', alignItems: 'center' }}>
+        <div style={{ marginInlineStart: '1rem' }}>
           <Typography variant='h3'>Optimal Bridge:</Typography>
           <p>
             D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}
diff --git a/web/src/Components/Combinations/CardContainer.tsx b/web/src/Components/Combinations/CardContainer.tsx
index 9464d76..368afc2 100644
--- a/web/src/Components/Combinations/CardContainer.tsx
+++ b/web/src/Components/Combinations/CardContainer.tsx
@@ -3,12 +3,12 @@ import React, { useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import CombinationCard from './CombinationCard'
 // @ts-ignore
-import { Button } from '@equinor/eds-core-react'
+import { Button, Icon } from '@equinor/eds-core-react'
 import { Bridge, Combinations } from '../../Types'
-import Icon from '../../Icons'
 import { FractionsAPI } from '../../Api'
 import { ErrorToast } from '../Common/Toast'
 import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce'
+import { add } from '@equinor/eds-icons'
 export const Card = styled.div`
   margin: 10px;
   padding: 10px;
@@ -123,8 +123,8 @@ export const CardContainer = ({
             })
           }}
         >
-          <Icon name='add_box' title='add_box' />
-          Add combination
+          <Icon data={add} title='add_box' />
+          New combination
         </Button>
       </div>
     </>
diff --git a/web/src/Components/Combinations/CombinationCard.tsx b/web/src/Components/Combinations/CombinationCard.tsx
index f9e29f3..0ef043a 100644
--- a/web/src/Components/Combinations/CombinationCard.tsx
+++ b/web/src/Components/Combinations/CombinationCard.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react'
 // @ts-ignore
-import { Button, Icon, Switch, Input } from '@equinor/eds-core-react'
+import { Button, Icon, Switch, Input, Tooltip, Divider } from '@equinor/eds-core-react'
 import CombinationTable from './CombinationTable'
 import styled from 'styled-components'
 import { Card } from './CardContainer'
@@ -10,11 +10,13 @@ import { CombinationAPI } from '../../Api'
 import { ErrorToast } from '../Common/Toast'
 import { findDValue, findGraphData } from '../../Utils'
 import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce'
+import { edit, close, delete_to_trash } from '@equinor/eds-icons'
 
 const CardHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: self-end;
+  margin-bottom: 0.5rem;
 `
 
 const CardSummation = styled.div`
@@ -131,9 +133,11 @@ export const CombinationCard = ({
     <Card>
       <div>
         <CardHeader>
-          <Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
-            <Icon name='edit' size={16} />
-          </Button>
+          <Tooltip title={isHeaderEditable ? 'Toggle edit off' : 'Edit combination title'}>
+            <Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
+              <Icon data={edit} size={16} style={{ width: '40px' }} />
+            </Button>
+          </Tooltip>
           <Input
             id={`${combination.name}`}
             value={combinationName}
@@ -151,9 +155,11 @@ export const CombinationCard = ({
               }
             }}
           />
-          <Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
-            <Icon name='close' title='close' />
-          </Button>
+          <Tooltip title={'Delete combination'}>
+            <Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
+              <Icon data={delete_to_trash} title='close' style={{ width: '40px' }} />
+            </Button>
+          </Tooltip>
         </CardHeader>
         {Object.keys(enabledProducts).length ? (
           <div>
diff --git a/web/src/Components/CombinationsWrapper.tsx b/web/src/Components/Combinations/CombinationsWrapper.tsx
similarity index 95%
rename from web/src/Components/CombinationsWrapper.tsx
rename to web/src/Components/Combinations/CombinationsWrapper.tsx
index e477ebf..0d5291b 100644
--- a/web/src/Components/CombinationsWrapper.tsx
+++ b/web/src/Components/Combinations/CombinationsWrapper.tsx
@@ -1,17 +1,17 @@
-import BridgeContainer from './Bridging/BridgeContainer'
-import CardContainer from './Combinations/CardContainer'
-import OptimizationContainer from './Optimization/OptimizationContainer'
+import BridgeContainer from '../Bridging/BridgeContainer'
+import CardContainer from './CardContainer'
+import OptimizationContainer from '../Optimization/OptimizationContainer'
 import React, { ReactElement, useContext, useEffect, useState } from 'react'
 // @ts-ignore
 import { Accordion, Button } from '@equinor/eds-core-react'
-import { BridgeAPI, CombinationAPI } from '../Api'
+import { BridgeAPI, CombinationAPI } from '../../Api'
 // @ts-ignore
 import styled from 'styled-components'
-import { BridgingOption } from '../Enums'
-import { ErrorToast } from './Common/Toast'
+import { BridgingOption } from '../../Enums'
+import { ErrorToast } from '../Common/Toast'
 import { AuthContext, IAuthContext } from 'react-oauth2-code-pkce'
-import { Bridge, Combination, Combinations, Products } from '../Types'
-import useLocalStorage from '../Hooks'
+import { Bridge, Combination, Combinations, Products } from '../../Types'
+import useLocalStorage from '../../Hooks'
 
 const MainComponentsWrapper = styled.div`
   padding: 16px 0 16px 0;
diff --git a/web/src/Components/ContactButton.tsx b/web/src/Components/ContactButton.tsx
index 5aab355..8be1671 100644
--- a/web/src/Components/ContactButton.tsx
+++ b/web/src/Components/ContactButton.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 // @ts-ignore
 import { Button, Dialog, Icon } from '@equinor/eds-core-react'
+import { comment_important } from '@equinor/eds-icons'
 
 export const ContactButton = () => {
   const [dialogOpen, setDialogOpen] = useState<boolean>(false)
@@ -8,7 +9,7 @@ export const ContactButton = () => {
   return (
     <>
       <Button variant='outlined' onClick={() => setDialogOpen(true)}>
-        <Icon name='comment_important' title='filter products' />
+        <Icon data={comment_important} title='filter products' />
         Contact
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen}>
diff --git a/web/src/Components/Optimization/OptimizationRunner.tsx b/web/src/Components/Optimization/OptimizationRunner.tsx
index a2ced34..7faeeee 100644
--- a/web/src/Components/Optimization/OptimizationRunner.tsx
+++ b/web/src/Components/Optimization/OptimizationRunner.tsx
@@ -3,7 +3,7 @@ import PillInput, { Pill } from './PillInput'
 import { Weight, WeightOptions } from './WeightOptions'
 import React, { ReactElement, useContext, useState } from 'react'
 // @ts-ignore
-import { Accordion, Button, CircularProgress, TextField, Typography, Dialog } from '@equinor/eds-core-react'
+import { Accordion, Button, CircularProgress, TextField, Typography, Dialog, Icon } from '@equinor/eds-core-react'
 import { Products } from '../../Types'
 import styled from 'styled-components'
 import { Tooltip } from '../Common/Tooltip'
@@ -11,12 +11,12 @@ import { ErrorToast } from '../Common/Toast'
 import { ParticleSizeContext } from '../../Context'
 import EditProducts from '../Common/EditProducts'
 import useLocalStorage from '../../Hooks'
-import Icon from '../../Icons'
 import numberOfProductsFitnessFormulaImg from './FormulaPictures/NumberOfProductsFitnessFormula.png'
 import totalFitnessFormulaImg from './FormulaPictures/TotalFitnessFormula.png'
 import MassFitnessFormulaImg from './FormulaPictures/MassFitnessFormula.png'
 import BridgeFitnessFormulaImg from './FormulaPictures/BridgeFitnessFormula.png'
 import { AuthContext } from 'react-oauth2-code-pkce'
+import { info_circle, play } from '@equinor/eds-icons'
 
 const { Actions, Title, CustomContent } = Dialog
 
@@ -33,7 +33,9 @@ const Wrapper = styled.div`
   flex-direction: column;
   justify-content: space-between;
   min-height: 250px;
-  width: fit-content;
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
 `
 
 const InputWrapper = styled.div`
@@ -98,60 +100,56 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
 
   return (
     <Wrapper>
-      <Typography variant='h3' style={{ paddingBottom: '2rem' }}>
-        Optimizer
+      <div style={{ display: 'flex', alignItems: 'center', paddingBlockEnd: '2rem' }}>
+        <Typography variant='h3'>Optimizer</Typography>
         <Icon
           style={{ cursor: 'pointer', paddingLeft: '5px' }}
-          name='info_circle'
+          data={info_circle}
           onClick={() => setDialogOpen(true)}
         />
-        <Dialog style={{ width: 'auto' }} open={dialogOpen}>
-          <Dialog.Header>
-            <Dialog.Title>Formulas used in optimizer</Dialog.Title>
-          </Dialog.Header>
-          <Dialog.CustomContent>
-            <table style={{ border: '50px' }}>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Total fitness – weighted average:</th>
-                <th style={{ padding: '10px' }}>
-                  <img src={totalFitnessFormulaImg} alt='Formula for total fitness' height={53} width={240}></img>
-                </th>
-              </tr>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Bridge fitness – standard deviation:</th>
-                <th style={{ padding: '10px' }}>
-                  <img src={BridgeFitnessFormulaImg} alt='Formula for total fitness' height={94} width={337}></img>
-                </th>
-              </tr>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Mass fitness – deviation from desired mass:</th>
-                <th style={{ padding: '10px' }}>
-                  <img src={MassFitnessFormulaImg} alt='Formula for total fitness' height={60} width={270}></img>
-                </th>
-              </tr>
-              <tr>
-                <th style={{ fontWeight: 'normal' }}>Number of products fitness:</th>
-                <th style={{ padding: '10px' }}>
-                  <img
-                    src={numberOfProductsFitnessFormulaImg}
-                    alt='Formula for total fitness'
-                    height={52}
-                    width={270}
-                  ></img>
-                </th>
-              </tr>
-            </table>
-          </Dialog.CustomContent>
-          <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
-            <Button onClick={() => setDialogOpen(false)}>Close</Button>
-          </Dialog.Actions>
-        </Dialog>
-      </Typography>
+      </div>
+      <Dialog style={{ width: 'auto' }} open={dialogOpen}>
+        <Dialog.Header>
+          <Dialog.Title>Formulas used in optimizer</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.CustomContent>
+          <table style={{ border: '50px' }}>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Total fitness – weighted average:</th>
+              <th style={{ padding: '10px' }}>
+                <img src={totalFitnessFormulaImg} alt='Formula for total fitness' height={53} width={240}></img>
+              </th>
+            </tr>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Bridge fitness – standard deviation:</th>
+              <th style={{ padding: '10px' }}>
+                <img src={BridgeFitnessFormulaImg} alt='Formula for total fitness' height={94} width={337}></img>
+              </th>
+            </tr>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Mass fitness – deviation from desired mass:</th>
+              <th style={{ padding: '10px' }}>
+                <img src={MassFitnessFormulaImg} alt='Formula for total fitness' height={60} width={270}></img>
+              </th>
+            </tr>
+            <tr>
+              <th style={{ fontWeight: 'normal' }}>Number of products fitness:</th>
+              <th style={{ padding: '10px' }}>
+                <img
+                  src={numberOfProductsFitnessFormulaImg}
+                  alt='Formula for total fitness'
+                  height={52}
+                  width={270}
+                ></img>
+              </th>
+            </tr>
+          </table>
+        </Dialog.CustomContent>
+        <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'center' }}>
+          <Button onClick={() => setDialogOpen(false)}>Close</Button>
+        </Dialog.Actions>
+      </Dialog>
       <div style={{ display: 'flex' }}>
-        <InputWrapper>
-          <Typography variant='body_short'>Pill</Typography>
-          <PillInput pill={pill} setPill={setPill} isLoading={loading} setInvalidInput={setInvalidInput} />
-        </InputWrapper>
         <InputWrapper>
           <Typography variant='body_short'>Products</Typography>
           <div
@@ -161,6 +159,9 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
               minHeight: '100px',
               overflow: 'auto',
               margin: '10px 0',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '4px',
+              padding: '4px',
             }}
           >
             {Object.values(products).map((product: any) => {
@@ -173,6 +174,10 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
           </div>
           <EditProducts allProducts={allProducts} enabledProducts={products} setEnabledProducts={setProducts} />
         </InputWrapper>
+        <InputWrapper>
+          <Typography variant='body_short'>Pill</Typography>
+          <PillInput pill={pill} setPill={setPill} isLoading={loading} setInvalidInput={setInvalidInput} />
+        </InputWrapper>
         <InputWrapper>
           <Accordion style={{ paddingTop: '10px' }}>
             <Accordion.Item>
@@ -264,9 +269,9 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
           </Accordion>
         </InputWrapper>
       </div>
-      <div style={{ display: 'flex', padding: '16px 0' }}>
+      <div style={{ display: 'flex', padding: '16px 0', alignSelf: 'flex-end' }}>
         <Button onClick={() => handleOptimize()} disabled={loading || invalidInput || iterations <= 0}>
-          <Icon name='play' title='play' />
+          <Icon data={play} title='play' />
           Run optimizer
         </Button>
         {loading && <CircularProgress style={{ padding: '0 15px', height: '35px', width: '35px' }} />}
diff --git a/web/src/Components/Optimization/styles.ts b/web/src/Components/Optimization/styles.ts
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/Components/RefreshButton.tsx b/web/src/Components/RefreshButton.tsx
index 1dfdc3c..f4e1437 100644
--- a/web/src/Components/RefreshButton.tsx
+++ b/web/src/Components/RefreshButton.tsx
@@ -1,13 +1,13 @@
 import React, { useContext, useState } from 'react'
 // @ts-ignore
-import { Button, Dialog, CircularProgress } from '@equinor/eds-core-react'
+import { Button, Dialog, CircularProgress, Icon } from '@equinor/eds-core-react'
 
 import { SyncAPI } from '../Api'
 import styled from 'styled-components'
 import { ErrorToast } from './Common/Toast'
 import { AuthContext } from 'react-oauth2-code-pkce'
-import Icon from '../Icons'
 import { IAuthContext } from 'react-oauth2-code-pkce'
+import { refresh } from '@equinor/eds-icons'
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -36,7 +36,7 @@ export const RefreshButton = () => {
   return (
     <>
       <Button variant='outlined' onClick={() => setDialogOpen(true)}>
-        <Icon name='refresh' title='refresh' />
+        <Icon data={refresh} title='refresh' />
         Synchronize with SharePoint
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen} isDismissable={true}>
diff --git a/web/src/Components/Solution/SolutionData.tsx b/web/src/Components/Solution/SolutionData.tsx
index 0098f7e..7378a39 100644
--- a/web/src/Components/Solution/SolutionData.tsx
+++ b/web/src/Components/Solution/SolutionData.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement, useContext, useEffect, useState } from 'react'
 // @ts-ignore
-import { Button, Typography, CircularProgress } from '@equinor/eds-core-react'
+import { Button, Typography, CircularProgress, Icon } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { ProductResult } from '../Optimization/OptimizationContainer'
 import { Products } from '../../Types'
 import { ReportAPI } from '../../Api'
 import { ErrorToast } from '../Common/Toast'
-import Icon from '../../Icons'
 import { AuthContext } from 'react-oauth2-code-pkce'
+import { save } from '@equinor/eds-icons'
 
 const LabelWrapper = styled.div`
   display: flex;
@@ -124,7 +124,7 @@ const SolutionData = ({ products, optimizationData }: SolutionDataProps) => {
       </div>
       <div style={{ display: 'flex', paddingTop: '20px' }}>
         <Button onClick={() => onExportClick()} style={{ width: '170px' }} disabled={loading}>
-          <Icon name='save' title='export' />
+          <Icon data={save} title='export' />
           Export solution
         </Button>
 
diff --git a/web/src/Icons.ts b/web/src/Icons.ts
deleted file mode 100644
index 9ddf61b..0000000
--- a/web/src/Icons.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// @ts-ignore
-import { Icon } from '@equinor/eds-core-react'
-// @ts-ignore
-import { comment_important, edit, filter_alt, info_circle, refresh, add_box, save, play } from '@equinor/eds-icons'
-
-Icon.add({
-  play,
-  filter_alt,
-  info_circle,
-  refresh,
-  edit,
-  comment_important,
-  add_box,
-  save,
-})
-
-export default Icon
diff --git a/web/src/Pages/Main.tsx b/web/src/Pages/Main.tsx
index 2ef92f6..107ba95 100644
--- a/web/src/Pages/Main.tsx
+++ b/web/src/Pages/Main.tsx
@@ -7,7 +7,7 @@ import { Button, Icon, TopBar, Typography } from '@equinor/eds-core-react'
 
 import RefreshButton from '../Components/RefreshButton'
 import { ProductsAPI } from '../Api'
-import CombinationsWrapper from '../Components/CombinationsWrapper'
+import CombinationsWrapper from '../Components/Combinations/CombinationsWrapper'
 import { Products } from '../Types'
 import { ErrorToast } from '../Components/Common/Toast'
 import { AuthContext } from 'react-oauth2-code-pkce'