diff --git a/packages/ui/src/atoms/Icon.js b/packages/ui/src/atoms/Icon.js
index d67e11c29ef77a5de4d5bc411a49e8830608fb4d..5d78520b45912621a1d2eabf673709cbcd5d10b0 100644
--- a/packages/ui/src/atoms/Icon.js
+++ b/packages/ui/src/atoms/Icon.js
@@ -1,7 +1,12 @@
 import React from 'react'
 import { pascalize } from 'humps'
 import * as icons from 'react-feather'
-import classes from './Icon.local.scss'
+import styled from 'styled-components'
+
+const Container = styled.span`
+  display: inline-flex;
+  width: var(--icon-size);
+`
 
 const Icon = ({ children, color = 'var(--color-local, black)', size = 24 }) => {
   // convert `arrow_left` to `ArrowLeft`
@@ -10,7 +15,7 @@ const Icon = ({ children, color = 'var(--color-local, black)', size = 24 }) => {
   // select the icon
   const icon = icons[name]
 
-  return <span className={classes.root}>{icon({ color, size })}</span>
+  return <Container>{icon({ color, size })}</Container>
 }
 
 export default Icon
diff --git a/packages/ui/src/atoms/Icon.local.scss b/packages/ui/src/atoms/Icon.local.scss
deleted file mode 100644
index dcf1c2ecbcf8976156987e1e67f164dd8c86152c..0000000000000000000000000000000000000000
--- a/packages/ui/src/atoms/Icon.local.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
-  // color of the icon is set by his parent
-
-  display: inline-flex;
-  width: var(--icon-size);
-}