diff --git a/src/components/images/DeviceIcon/index.js b/src/components/images/DeviceIcon/index.js
index f8f19010..853c8886 100644
--- a/src/components/images/DeviceIcon/index.js
+++ b/src/components/images/DeviceIcon/index.js
@@ -2,8 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { colors as COLORS, icons as ICONS } from 'trezor-ui-components';
-import styled from 'styled-components';
+import { Icon, colors as COLORS, icons } from 'trezor-ui-components';
 import type { TrezorDevice } from 'flowtype';
 
 type Props = {
@@ -14,26 +13,14 @@ type Props = {
     onClick?: any,
 };
 
-const SvgWrapper = styled.svg`
-    :hover {
-        path {
-            fill: ${props => props.hoverColor};
-        }
-    }
-`;
-
-const Path = styled.path`
-    fill: ${props => props.color};
-`;
-
 const getDeviceIcon = (majorVersion: number) => {
     switch (majorVersion) {
         case 1:
-            return ICONS.T1;
+            return icons.T1;
         case 2:
-            return ICONS.T2;
+            return icons.T2;
         default:
-            return ICONS.T2;
+            return icons.T2;
     }
 };
 
@@ -45,17 +32,8 @@ const DeviceIcon = ({
     onClick,
 }: Props) => {
     const majorVersion = device.features ? device.features.major_version : 2;
-    return (
-        <SvgWrapper
-            hoverColor={hoverColor}
-            width={`${size}`}
-            height={`${size}`}
-            viewBox="0 0 1024 1024"
-            onClick={onClick}
-        >
-            <Path key={majorVersion} color={color} d={getDeviceIcon(majorVersion)} />
-        </SvgWrapper>
-    );
+    const icon = getDeviceIcon(majorVersion);
+    return <Icon icon={icon} hoverColor={hoverColor} onClick={onClick} color={color} size={size} />;
 };
 
 DeviceIcon.propTypes = {