diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 93d6d1a0..70734f21 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -5,7 +5,7 @@ import { radii } from 'styles/theme'
import Box from 'components/base/Box'
import GrowScroll from 'components/base/GrowScroll'
-import IconSensitiveOperationShield from 'icons/illustrations/SensitiveOperationShield'
+import IconSensitiveOperationShield from 'icons/SensitiveOperationShield'
// GENERAL
export const Title = styled(Box).attrs({
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js
index 66e22e72..292e9e08 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck.js
@@ -5,6 +5,7 @@ import { shell } from 'electron'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import type { T } from 'types/common'
@@ -17,8 +18,6 @@ import RadioGroup from 'components/base/RadioGroup'
import GenuineCheckModal from 'components/GenuineCheckModal'
import TranslatedError from 'components/TranslatedError'
-import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError'
-import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError'
import IconCheck from 'icons/Check'
import IconCross from 'icons/Cross'
@@ -325,8 +324,8 @@ export function GenuineCheckFail({
{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}
{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}
-
-
+
+
) : (
@@ -336,7 +335,7 @@ export function GenuineCheckFail({
{t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
-
+
)}
diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index 938ba166..04b7710a 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -3,14 +3,15 @@
import React, { PureComponent } from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
+import { i } from 'helpers/staticPath'
+
import { rgba } from 'styles/helpers'
import { isLedgerNano } from 'reducers/onboarding'
import Box from 'components/base/Box'
import IconCheckCirle from 'icons/Check'
-import IconLedgerNano from 'icons/illustrations/LedgerNano'
-import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
+
import { Title, Inner, FixedTopContainer, StepContainerInner } from '../helperComponents'
import OnboardingFooter from '../OnboardingFooter'
@@ -47,7 +48,7 @@ class SelectDevice extends PureComponent {
>
{onboarding.isLedgerNano && }
-
+
{t('onboarding:selectDevice.ledgerNanoCard.title')}
@@ -57,7 +58,7 @@ class SelectDevice extends PureComponent {
>
{!onboarding.isLedgerNano && onboarding.isLedgerNano !== null && }
-
+
{t('onboarding:selectDevice.ledgerBlueCard.title')}
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
index a47cced6..21611255 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
@@ -2,11 +2,11 @@
import React, { PureComponent } from 'react'
import { translate } from 'react-i18next'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import Box from 'components/base/Box'
import type { T } from 'types/common'
-import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN'
import IconChevronRight from 'icons/ChevronRight'
@@ -60,7 +60,7 @@ class SelectPIN extends PureComponent {
-
+
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
index b19bbd0b..9db95c4e 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
@@ -2,11 +2,11 @@
import React, { PureComponent } from 'react'
import { translate } from 'react-i18next'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import Box from 'components/base/Box'
import type { T } from 'types/common'
-import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN'
import IconChevronRight from 'icons/ChevronRight'
@@ -63,7 +63,7 @@ class SelectPINnano extends PureComponent {
return (
-
+
{stepsLedgerNano.map(step => )}
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
index 5bbc8767..0ff30312 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
@@ -2,11 +2,11 @@
import React, { PureComponent } from 'react'
import { translate } from 'react-i18next'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import Box from 'components/base/Box'
import type { T } from 'types/common'
-import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN'
import IconChevronRight from 'icons/ChevronRight'
@@ -60,7 +60,7 @@ class SelectPINrestoreBlue extends PureComponent {
-
+
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
index ebf20881..addacd63 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
@@ -2,11 +2,11 @@
import React, { PureComponent } from 'react'
import { translate } from 'react-i18next'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import Box from 'components/base/Box'
import type { T } from 'types/common'
-import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN'
import IconChevronRight from 'icons/ChevronRight'
@@ -63,7 +63,7 @@ class SelectPINrestoreNano extends PureComponent {
return (
-
+
{stepsLedgerNano.map(step => )}
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index 8d782096..c419be90 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@@ -1,11 +1,11 @@
// @flow
import React from 'react'
+import { i } from 'helpers/staticPath'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
-import IconGetStarted from 'icons/illustrations/GetStartedLogo'
import type { StepProps } from '..'
import { Title } from '../helperComponents'
@@ -14,7 +14,7 @@ export default (props: StepProps) => {
return (
-
+
{t('onboarding:start.title')}
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
index f0db2baf..3cf4e412 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
@@ -2,11 +2,11 @@
import React, { PureComponent, Fragment } from 'react'
import { translate } from 'react-i18next'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import type { T } from 'types/common'
import Box from 'components/base/Box'
-import IconWriteSeed from 'icons/illustrations/WriteSeed'
import IconChevronRight from 'icons/ChevronRight'
import {
@@ -75,7 +75,7 @@ class WriteSeedBlue extends PureComponent {
-
+
{steps.map(step => )}
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
index b472fce0..3d34664a 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
@@ -2,11 +2,11 @@
import React, { PureComponent, Fragment } from 'react'
import { translate } from 'react-i18next'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import type { T } from 'types/common'
import Box from 'components/base/Box'
-import IconWriteSeed from 'icons/illustrations/WriteSeed'
import IconChevronRight from 'icons/ChevronRight'
import {
@@ -75,7 +75,7 @@ class WriteSeedNano extends PureComponent {
-
+
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
index 2d319b6b..39ebf55d 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
@@ -2,11 +2,11 @@
import React, { PureComponent, Fragment } from 'react'
import { translate } from 'react-i18next'
import { colors } from 'styles/theme'
+import { i } from 'helpers/staticPath'
import Box from 'components/base/Box'
import type { T } from 'types/common'
-import IconWriteSeed from 'icons/illustrations/WriteSeed'
import type { OnboardingState } from 'reducers/onboarding'
import IconChevronRight from 'icons/ChevronRight'
@@ -100,7 +100,7 @@ class WriteSeedRestore extends PureComponent {
-
+
{onboarding.isLedgerNano ? (
diff --git a/src/components/RenderError.js b/src/components/RenderError.js
index 23a0f39b..ed888ae4 100644
--- a/src/components/RenderError.js
+++ b/src/components/RenderError.js
@@ -14,8 +14,8 @@ import ExportLogsBtn from 'components/ExportLogsBtn'
import Box from 'components/base/Box'
import Space from 'components/base/Space'
import Button from 'components/base/Button'
+import ConfirmModal from 'components/base/Modal/ConfirmModal'
import IconTriangleWarning from 'icons/TriangleWarning'
-import ConfirmModal from './base/Modal/ConfirmModal'
import { IconWrapperCircle } from './SettingsPage/sections/Profile'
type Props = {
diff --git a/src/icons/illustrations/SensitiveOperationShield.js b/src/icons/SensitiveOperationShield.js
similarity index 100%
rename from src/icons/illustrations/SensitiveOperationShield.js
rename to src/icons/SensitiveOperationShield.js
diff --git a/src/icons/illustrations/GetStartedLogo.js b/src/icons/illustrations/GetStartedLogo.js
deleted file mode 100644
index cce003ad..00000000
--- a/src/icons/illustrations/GetStartedLogo.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/LedgerBlue.js b/src/icons/illustrations/LedgerBlue.js
deleted file mode 100644
index 739afc2c..00000000
--- a/src/icons/illustrations/LedgerBlue.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/LedgerBlueError.js b/src/icons/illustrations/LedgerBlueError.js
deleted file mode 100644
index c668b490..00000000
--- a/src/icons/illustrations/LedgerBlueError.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/LedgerBlueSelectPIN.js b/src/icons/illustrations/LedgerBlueSelectPIN.js
deleted file mode 100644
index 2391fe05..00000000
--- a/src/icons/illustrations/LedgerBlueSelectPIN.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/LedgerNano.js b/src/icons/illustrations/LedgerNano.js
deleted file mode 100644
index 634bd32b..00000000
--- a/src/icons/illustrations/LedgerNano.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/LedgerNanoError.js b/src/icons/illustrations/LedgerNanoError.js
deleted file mode 100644
index e265504f..00000000
--- a/src/icons/illustrations/LedgerNanoError.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/LedgerNanoSelectPIN.js b/src/icons/illustrations/LedgerNanoSelectPIN.js
deleted file mode 100644
index aa9fb1c2..00000000
--- a/src/icons/illustrations/LedgerNanoSelectPIN.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// @flow
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/SetPassword.js b/src/icons/illustrations/SetPassword.js
deleted file mode 100644
index 3f0e82ce..00000000
--- a/src/icons/illustrations/SetPassword.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/icons/illustrations/WriteSeed.js b/src/icons/illustrations/WriteSeed.js
deleted file mode 100644
index 674f9bb8..00000000
--- a/src/icons/illustrations/WriteSeed.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// @flow
-
-import React from 'react'
-
-export default () => (
-
-)
diff --git a/src/stories/icons.stories.js b/src/stories/icons.stories.js
index f3527b8c..81c44de4 100644
--- a/src/stories/icons.stories.js
+++ b/src/stories/icons.stories.js
@@ -6,7 +6,7 @@ import Box from 'components/base/Box'
const stories = storiesOf('Common', module)
-const req = require.context('../icons', true, /^((?!illustrations).)*\.js$/)
+const req = require.context('../icons', true, /.js$/)
const icons = req
.keys()
.map(file => {
diff --git a/static/images/blue-error-onb.svg b/static/images/blue-error-onb.svg
new file mode 100644
index 00000000..96fa9e15
--- /dev/null
+++ b/static/images/blue-error-onb.svg
@@ -0,0 +1,19 @@
+
diff --git a/static/images/get-started-onb.svg b/static/images/get-started-onb.svg
new file mode 100644
index 00000000..ec9acd80
--- /dev/null
+++ b/static/images/get-started-onb.svg
@@ -0,0 +1,13 @@
+
diff --git a/static/images/ledger-blue-onb.svg b/static/images/ledger-blue-onb.svg
new file mode 100644
index 00000000..c4b098b8
--- /dev/null
+++ b/static/images/ledger-blue-onb.svg
@@ -0,0 +1,7 @@
+
diff --git a/static/images/ledger-nano-onb.svg b/static/images/ledger-nano-onb.svg
new file mode 100644
index 00000000..5e25be0a
--- /dev/null
+++ b/static/images/ledger-nano-onb.svg
@@ -0,0 +1,10 @@
+
diff --git a/static/images/nano-error-onb.svg b/static/images/nano-error-onb.svg
new file mode 100644
index 00000000..38237aa0
--- /dev/null
+++ b/static/images/nano-error-onb.svg
@@ -0,0 +1,34 @@
+
diff --git a/static/images/select-pin-blue-onb.svg b/static/images/select-pin-blue-onb.svg
new file mode 100644
index 00000000..65ba0de4
--- /dev/null
+++ b/static/images/select-pin-blue-onb.svg
@@ -0,0 +1,19 @@
+
diff --git a/static/images/select-pin-nano-onb.svg b/static/images/select-pin-nano-onb.svg
new file mode 100644
index 00000000..e3676379
--- /dev/null
+++ b/static/images/select-pin-nano-onb.svg
@@ -0,0 +1,25 @@
+
diff --git a/static/images/write-seed-onb.svg b/static/images/write-seed-onb.svg
new file mode 100644
index 00000000..31573420
--- /dev/null
+++ b/static/images/write-seed-onb.svg
@@ -0,0 +1,9 @@
+