diff --git a/examples/next/src/components/GithubAndDocumentationButtons.tsx b/examples/next/src/components/GithubAndDocumentationButtons.tsx
index 9a9a705aee..7df6dd860c 100644
--- a/examples/next/src/components/GithubAndDocumentationButtons.tsx
+++ b/examples/next/src/components/GithubAndDocumentationButtons.tsx
@@ -1,4 +1,5 @@
-import { Button, Icon, Stack } from '@ultraviolet/ui'
+import { GithubIcon } from '@ultraviolet/icons'
+import { Button, Stack } from '@ultraviolet/ui'
 
 const GithubAndDocumentationButtons = () => (
   <Stack gap={2} direction="row">
@@ -8,7 +9,7 @@ const GithubAndDocumentationButtons = () => (
       href="https://github.com/scaleway/ultraviolet"
       aria-label="github"
     >
-      <Icon name="github" size={32} />
+      <GithubIcon size="large" />
     </Button>
     <Button
       href="https://storybook.ultraviolet.scaleway.com/"
diff --git a/examples/next/src/components/Header.tsx b/examples/next/src/components/Header.tsx
index 73b7ed775d..da25e51ec4 100644
--- a/examples/next/src/components/Header.tsx
+++ b/examples/next/src/components/Header.tsx
@@ -1,6 +1,7 @@
 import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
-import { Breakpoint, Icon, Toggle } from '@ultraviolet/ui'
+import { MoonIcon, SunIcon } from '@ultraviolet/icons'
+import { Breakpoint, Toggle } from '@ultraviolet/ui'
 import { APP_MAX_WIDTH } from '../constants'
 import GithubAndDocumentationButtons from './GithubAndDocumentationButtons'
 import Logo from './Logo'
@@ -46,13 +47,13 @@ const TopBar = () => {
           <Breakpoint up="medium">
             <GithubAndDocumentationButtons />
           </Breakpoint>
-          <Icon size={20} name="sun" />
+          <SunIcon size="small" />
           <Toggle
             name="darkMode"
             checked={theme === 'dark'}
             onChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
           />
-          <Icon size={20} name="moon" />
+          <MoonIcon size="small" />
         </HorizontalStack>
       </HeaderRow>
     </Header>
diff --git a/examples/next/src/pages/_app.tsx b/examples/next/src/pages/_app.tsx
index 0204439fac..6ff84a5253 100644
--- a/examples/next/src/pages/_app.tsx
+++ b/examples/next/src/pages/_app.tsx
@@ -38,7 +38,6 @@ const App = ({ Component, pageProps }: AppProps) => {
       ...COMMON_THEME_PROPS,
       colors: {
         primary: {
-          textWeak: '#A395FF',
           text: '#4F0599',
         },
       },
diff --git a/examples/next/src/pages/advanced/OpenSource.tsx b/examples/next/src/pages/advanced/OpenSource.tsx
index cd4684d1c6..e5b73178f5 100644
--- a/examples/next/src/pages/advanced/OpenSource.tsx
+++ b/examples/next/src/pages/advanced/OpenSource.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
-import { Icon, Link, Stack, Text, down } from '@ultraviolet/ui'
+import { GithubIcon } from '@ultraviolet/icons'
+import { Link, Stack, Text, down } from '@ultraviolet/ui'
 import swForm from '../../assets/icons/icon-scaleway-form.svg'
 import swLib from '../../assets/icons/icon-scaleway-lib.svg'
 import Card from '../../components/Card'
@@ -41,7 +42,7 @@ const OpenSource = () => (
                 Build amazing forms with Ultraviolet UI and React Final Form 🚀
               </StyledDescription>
               <Stack gap={1} direction="row">
-                <Icon name="github" size={20} />
+                <GithubIcon size="small" />
                 <Link
                   href="https://github.com/scaleway/scaleway-form"
                   target="_blank"
@@ -61,7 +62,7 @@ const OpenSource = () => (
                 Scaleway Lib is a set of NPM packages used at Scaleway
               </StyledDescription>
               <Stack gap={1} direction="row">
-                <Icon name="github" size={20} />
+                <GithubIcon size="small" />
                 <Link
                   href="https://github.com/scaleway/scaleway-lib"
                   target="_blank"
diff --git a/examples/next/src/pages/login/login.tsx b/examples/next/src/pages/login/login.tsx
index be31f47938..7ac6f2daa6 100644
--- a/examples/next/src/pages/login/login.tsx
+++ b/examples/next/src/pages/login/login.tsx
@@ -59,7 +59,7 @@ const LogIn = () => {
     <StyledLoginContainer>
       <Form methods={methods} errors={mockErrors} onSubmit={handleSubmit}>
         <Stack gap={1} alignItems="center">
-          <IdIcon size="1.7em" />
+          <IdIcon size="small" />
           <Text as="h1" variant="heading">
             Login form
           </Text>
diff --git a/examples/next/src/pages/login/signup.tsx b/examples/next/src/pages/login/signup.tsx
index 9ed4598902..14a9ff87a7 100644
--- a/examples/next/src/pages/login/signup.tsx
+++ b/examples/next/src/pages/login/signup.tsx
@@ -94,7 +94,7 @@ const SignUp = () => {
         onSubmit={handleSubmit}
       >
         <Stack gap={1} alignItems="center">
-          <ProfileIcon size="1.7em" />
+          <ProfileIcon size="small" />
           <Text as="div" placement="center" variant="heading">
             Sign up form
           </Text>