feat(suite-native): use new pictogram shapes and illustrated icons

trezor · Dec 9, 2024 · fc36de9 · fc36de9
1 parent 38fd329
commit fc36de9
Show file tree

Hide file tree

Showing 16 changed files with 246 additions and 85 deletions.
diff --git a/suite-native/atoms/package.json b/suite-native/atoms/package.json
@@ -30,6 +30,7 @@
         "react-native": "0.76.1",
         "react-native-gesture-handler": "^2.21.0",
         "react-native-reanimated": "3.16.1",
-        "react-native-safe-area-context": "^4.14.0"
+        "react-native-safe-area-context": "^4.14.0",
+        "react-native-svg": "15.9.0"
     }
 }
diff --git a/suite-native/atoms/src/Pictogram.tsx b/suite-native/atoms/src/Pictogram.tsx
diff --git a/suite-native/atoms/src/Pictogram/CriticalIconSvg.tsx b/suite-native/atoms/src/Pictogram/CriticalIconSvg.tsx
@@ -0,0 +1,16 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { PictogramIconSvgProps } from './types';
+
+export const CriticalIconSvg = ({ color }: PictogramIconSvgProps) => (
+    <Svg width={40} height={40} fill="none">
+        <Path
+            d="M18.677 36.356c1.56.655 2.746.084 4.235-.518a127.96 127.96 0 0 0 4.92-2.109 59.125 59.125 0 0 0 4.695-2.423c1.372-.78 2.889-1.538 3.403-3.14.513-1.59.453-3.56.48-5.212a62.067 62.067 0 0 0-.172-5.848c-.126-1.664-.12-3.59-.765-5.15-.641-1.557-2.068-2.27-3.447-3.092-3.017-1.796-6.032-3.537-9.21-5.05-1.535-.73-2.976-1.143-4.624-.482-1.648.662-3.22 1.543-4.773 2.378A79.13 79.13 0 0 0 8.545 8.55c-1.223.773-2.767 1.56-3.523 2.848-.836 1.421-.786 3.45-.917 5.036a61.989 61.989 0 0 0-.207 5.62c.014 1.9-.156 4.2.412 6.035.508 1.641 2.224 2.435 3.603 3.245a98.617 98.617 0 0 0 5.375 2.935c1.82.924 3.59 2.015 5.536 2.38.938.175 1.972-1.052 1.048-1.787-1.099-.874-2.3-1.387-3.56-2.001a114.705 114.705 0 0 1-4.12-2.113 91.727 91.727 0 0 1-3.688-2.104c-.467-.28-1.156-.568-1.506-1.01-.416-.528-.319-1.578-.358-2.205a62.274 62.274 0 0 1 .145-9.443c.108-1.186-.026-2.88.956-3.728 1.11-.96 2.543-1.696 3.8-2.444a81.754 81.754 0 0 1 3.8-2.122c1.284-.676 2.7-1.62 4.08-1.976 1.212-.313 2.503.639 3.535 1.159a90.113 90.113 0 0 1 4.09 2.193c1.209.691 2.43 1.39 3.574 2.184.496.344 1.043.7 1.468 1.134.499.51.501 1.13.58 1.81.362 3.132.466 6.283.37 9.435-.028.899-.05 1.798-.1 2.697-.036.627-.011.983-.498 1.41-1.138.993-2.705 1.702-4.003 2.469-1.444.854-2.868 1.736-4.328 2.563-.733.415-1.468.821-2.21 1.22-.805.436-1.607 1.082-2.558.801-.951-.28-1.579 1.18-.664 1.563v.003z"
+            fill={color}
+        />
+        <Path
+            d="M21.094 21.585c.266-3.304.096-6.622.094-9.933 0-1.547-2.422-1.55-2.422 0 0 3.316-.01 6.629.262 9.933.108 1.317 1.957 1.321 2.066 0zM21.448 25.604a1.623 1.623 0 0 0-1.124-1.08c-.308-.082-.715-.048-.988.128l-.26.198c-.094.094-.17.201-.23.315a1.363 1.363 0 0 0-.264.538c-.005.017-.005.035-.007.051a1.424 1.424 0 0 0-.03.221v.014c-.007.171.012.342.065.504.009.032.023.064.034.094.012.03.025.06.04.089.015.037.027.07.045.107.12.224.329.431.552.557.12.066.246.11.377.142h.004c.044.009.088.018.131.025.085.013.172.022.258.02.213-.007.416-.062.602-.153l.018-.007c.046-.022.09-.05.133-.077a1.49 1.49 0 0 0 .101-.066l.017-.014c.048-.037.096-.073.137-.114.09-.087.182-.206.246-.31.032-.055.055-.121.078-.176.021-.046.062-.128.079-.19.034-.125.052-.276.052-.408 0-.082-.032-.274-.048-.354l-.014-.055h-.004zM16.57 34.774c.767.925 2.527 1.639 3.715 1.694 1.441.068 2.753-.742 3.817-1.623.786-.65-.225-1.894-1.08-1.39-1.11.658-2.537 1.436-3.883 1.328-1.232-.098-2.468-1.127-3.562-1.64l-.568 1.335c1.168.283 2.213.967 3.39 1.262a7.68 7.68 0 0 0 3.394.086c1.827-.376 3.828-1.581 5.27-2.729.401-.322.077-1.09-.435-1.04-1.69.166-2.988 1.444-4.555 1.985-1.893.655-4.803.164-6.498-.9-.694-.433-1.545.612-.892 1.149 1.236 1.015 2.668 2.256 4.322 2.425 1.777.18 3.452-.86 4.914-1.734l-1.08-1.39c-.922.772-2.064 1.354-3.291 1.2-.935-.116-1.797-.579-2.74-.604-.321-.01-.422.37-.243.584l.005.002zM11.118 3.912c-1.475.185-2.658.988-3.902 1.764a49.84 49.84 0 0 0-3.909 2.7c-1.077.825-1.473 1.556-1.78 2.856-.33 1.39-.83 3.067-.285 4.45.117.296.57.351.664 0 .349-1.283.386-2.633.705-3.932.156-.63.264-1.31.701-1.823.437-.513 1.209-.942 1.786-1.349a58.107 58.107 0 0 1 3.1-2.051c1.057-.648 2.233-1.216 3.095-2.197.124-.142.058-.45-.175-.42v.002zM28.757 36.986c1.174-.416 2.185-1.37 3.212-2.063 1.166-.788 2.338-1.566 3.505-2.35.9-.608 2.077-1.087 2.84-1.863.69-.7.736-1.766.655-2.692-.041-.468-.588-.61-.864-.233-.243.335-.296.634-.36 1.036-.12.748-.375 1.098-1.04 1.49a43.808 43.808 0 0 0-3.03 1.974c-.986.7-1.878 1.33-2.806 2.008-.871.639-1.928 1.298-2.443 2.266-.11.205.076.513.329.424l.002.003z"
+            fill={color}
+        />
+    </Svg>
+);
diff --git a/suite-native/atoms/src/Pictogram/CriticalShapeSvg.tsx b/suite-native/atoms/src/Pictogram/CriticalShapeSvg.tsx
@@ -0,0 +1,22 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { useNativeStyles } from '@trezor/styles';
+
+export const CriticalShapeSvg = () => {
+    const { utils } = useNativeStyles();
+    const borderColor = utils.colors.backgroundAlertRedSubtleOnElevationNegative;
+    const backgroundColor = utils.colors.backgroundAlertRedSubtleOnElevation1;
+
+    return (
+        <Svg width={112} height={112} fill="none">
+            <Path
+                d="M105 36.6798C105 31.309 102.128 26.348 97.4713 23.6729L63.7306 4.29171C59.1042 1.63422 53.4143 1.63422 48.7879 4.29171L15.0472 23.6729C10.3901 26.348 7.51855 31.3089 7.51855 36.6797V75.3203C7.51855 80.6911 10.3901 85.652 15.0472 88.3272L48.7879 107.708C53.4143 110.366 59.1042 110.366 63.7306 107.708L97.4713 88.3272C102.128 85.652 105 80.6911 105 75.3203V36.6798Z"
+                fill={borderColor}
+            />
+            <Path
+                d="M93.3554 40.6462C93.3554 37.0549 91.4296 33.7393 88.31 31.9599L61.2153 16.5055C58.1444 14.7539 54.377 14.7539 51.3061 16.5055L24.2114 31.9599C21.0919 33.7393 19.166 37.0549 19.166 40.6462V71.3538C19.166 74.9452 21.0919 78.2608 24.2114 80.0401L51.3061 95.4946C54.377 97.2462 58.1444 97.2461 61.2153 95.4946L88.31 80.0401C91.4296 78.2608 93.3554 74.9452 93.3554 71.3538V40.6462Z"
+                fill={backgroundColor}
+            />
+        </Svg>
+    );
+};
diff --git a/suite-native/atoms/src/Pictogram/InfoIconSvg.tsx b/suite-native/atoms/src/Pictogram/InfoIconSvg.tsx
@@ -0,0 +1,16 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { PictogramIconSvgProps } from './types';
+
+export const InfoIconSvg = ({ color }: PictogramIconSvgProps) => (
+    <Svg width={40} height={40} fill="none">
+        <Path
+            d="M5.92 28.365c1.962 3.792 5.62 6.537 9.663 7.83 3.666 1.171 7.526 1.12 10.9-.532 3.6-1.278 6.779-3.791 8.53-7.12 3.398-6.468 2.502-15.27-3.179-20.202-5.976-5.19-15.502-5.907-21.987-1.167C3.55 11.781 2.503 21.768 5.92 28.365zm3.772-16.977c2.036-2.74 5.768-4.181 9.1-4.45 3.254-.263 6.522.463 9.303 2.178 5.469 3.372 7.269 10.141 5.32 16.067-1.322 4.018-4.642 7.068-8.565 8.485-5.469.873-11.35-.293-14.99-4.773-3.865-4.755-3.794-12.627-.168-17.507z"
+            fill={color}
+        />
+        <Path
+            d="M19.52 18.074c-.247 3.078-.09 6.167-.087 9.254 0 1.44 2.255 1.442 2.253 0 0-3.09.009-6.174-.245-9.254-.102-1.227-1.824-1.23-1.923 0h.002zM18.968 14.154c.185.57.637 1.022 1.221 1.175.337.09.778.053 1.075-.14.094-.07.188-.144.281-.216a1.36 1.36 0 0 0 .248-.342 1.455 1.455 0 0 0 .287-.586c.003-.02.003-.036.008-.055.017-.08.028-.16.034-.241v-.014a1.597 1.597 0 0 0-.07-.548c-.01-.035-.024-.068-.035-.104l-.042-.099c-.016-.038-.03-.079-.05-.115a1.589 1.589 0 0 0-.6-.605 1.502 1.502 0 0 0-.408-.153h-.006a1.202 1.202 0 0 0-.143-.028 1.37 1.37 0 0 0-.278-.022 1.546 1.546 0 0 0-.653.167l-.02.008c-.05.025-.096.055-.143.085a1.486 1.486 0 0 0-.11.072l-.02.016a1.63 1.63 0 0 0-.151.123 1.76 1.76 0 0 0-.268.337c-.035.06-.06.132-.085.192-.022.05-.066.14-.085.208a2.004 2.004 0 0 0-.058.444c0 .088.036.299.052.384.006.022.008.04.017.06l.002-.003zM30.108 37.437c1.693.42 4.056-1.42 5.313-2.386 1.769-1.357 3.51-3.005 4.514-5.023.266-.536-.37-1.04-.825-.636-1.504 1.338-2.727 2.957-4.257 4.273a16.462 16.462 0 0 1-2.52 1.79c-.756.437-1.82.732-2.374 1.407-.156.19-.12.507.151.573l-.002.002zM3.607 13.064c.428-.488.497-1.017.696-1.63.28-.858.592-1.711.997-2.52.714-1.434 1.737-2.686 2.448-4.112.127-.256-.131-.526-.39-.39-1.469.768-2.555 2.34-3.286 3.782-.614 1.212-1.7 3.315-1.189 4.68.105.282.49.458.726.192l-.002-.002z"
+            fill={color}
+        />
+    </Svg>
+);
diff --git a/suite-native/atoms/src/Pictogram/InfoShapeSvg.tsx b/suite-native/atoms/src/Pictogram/InfoShapeSvg.tsx
@@ -0,0 +1,16 @@
+import Svg, { Rect } from 'react-native-svg';
+
+import { useNativeStyles } from '@trezor/styles';
+
+export const InfoShapeSvg = () => {
+    const { utils } = useNativeStyles();
+    const borderColor = utils.colors.backgroundAlertBlueSubtleOnElevationNegative;
+    const backgroundColor = utils.colors.backgroundAlertBlueSubtleOnElevation1;
+
+    return (
+        <Svg width={112} height={112} fill="none">
+            <Rect x="4" y="4" width="104" height="104" rx="52" fill={borderColor} />
+            <Rect x="16" y="16" width="80" height="80" rx="40" fill={backgroundColor} />
+        </Svg>
+    );
+};
diff --git a/suite-native/atoms/src/Pictogram/Pictogram.tsx b/suite-native/atoms/src/Pictogram/Pictogram.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { Icon, IconName } from '@suite-native/icons';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import { Color } from '@trezor/theme';
+
+import { Box } from '../Box';
+import { CriticalIconSvg } from './CriticalIconSvg';
+import { CriticalShapeSvg } from './CriticalShapeSvg';
+import { InfoIconSvg } from './InfoIconSvg';
+import { InfoShapeSvg } from './InfoShapeSvg';
+import { SuccessIconSvg } from './SuccessIconSvg';
+import { SuccessShapeSvg } from './SuccessShapeSvg';
+import { PictogramIconSvgProps } from './types';
+import { WarningIconSvg } from './WarningIconSvg';
+import { WarningShapeSvg } from './WarningShapeSvg';
+
+export type PictogramVariant = 'success' | 'info' | 'warning' | 'critical';
+
+type PictogramProps = {
+    variant: PictogramVariant;
+    icon?: IconName;
+};
+
+type PictogramConfig = {
+    ShapeSvg: () => React.JSX.Element;
+    IconSvg: (props: PictogramIconSvgProps) => React.JSX.Element;
+    iconColor: Color;
+    iconOffset: number;
+};
+
+const pictogramVariantsMap = {
+    success: {
+        ShapeSvg: SuccessShapeSvg,
+        IconSvg: SuccessIconSvg,
+        iconOffset: 0,
+        iconColor: 'iconPrimaryDefault',
+    },
+    info: {
+        ShapeSvg: InfoShapeSvg,
+        IconSvg: InfoIconSvg,
+        iconOffset: 0,
+        iconColor: 'iconAlertBlue',
+    },
+    warning: {
+        ShapeSvg: WarningShapeSvg,
+        IconSvg: WarningIconSvg,
+        iconOffset: 20,
+        iconColor: 'iconAlertYellow',
+    },
+    critical: {
+        ShapeSvg: CriticalShapeSvg,
+        IconSvg: CriticalIconSvg,
+        iconOffset: 0,
+        iconColor: 'iconAlertRed',
+    },
+} as const satisfies Record<PictogramVariant, PictogramConfig>;
+
+const pictogramContainerStyle = prepareNativeStyle(_ => ({
+    width: 112,
+    height: 112,
+}));
+
+const iconContainerStyle = prepareNativeStyle<{ iconOffset?: number }>((_, { iconOffset }) => ({
+    position: 'absolute',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    paddingTop: iconOffset,
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+
+export const Pictogram = ({ variant, icon }: PictogramProps) => {
+    const { applyStyle, utils } = useNativeStyles();
+    const { ShapeSvg, IconSvg, iconOffset, iconColor } = pictogramVariantsMap[variant];
+
+    return (
+        <Box style={applyStyle(pictogramContainerStyle)}>
+            <ShapeSvg />
+            <Box style={applyStyle(iconContainerStyle, { iconOffset })}>
+                {icon ? (
+                    <Icon name={icon} color={utils.colors[iconColor]} size={40} />
+                ) : (
+                    <IconSvg color={utils.colors[iconColor]} />
+                )}
+            </Box>
+        </Box>
+    );
+};
diff --git a/suite-native/atoms/src/Pictogram/SuccessIconSvg.tsx b/suite-native/atoms/src/Pictogram/SuccessIconSvg.tsx
@@ -0,0 +1,16 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { PictogramIconSvgProps } from './types';
+
+export const SuccessIconSvg = ({ color }: PictogramIconSvgProps) => (
+    <Svg width={54} height={54} fill="none">
+        <Path
+            d="M40.147 14.636c-6.258-5.543-16.233-6.309-23.024-1.246-6.595 4.921-7.69 15.588-4.113 22.636 2.056 4.05 5.885 6.982 10.12 8.363 3.838 1.25 7.88 1.196 11.413-.568 3.77-1.366 7.1-4.05 8.932-7.605 3.558-6.91 2.623-16.309-3.326-21.58h-.002zm1.656 17.99c-1.385 4.293-4.861 7.55-8.97 9.064-5.726.933-11.885-.313-15.697-5.099-4.047-5.078-3.973-13.486-.175-18.7 2.131-2.927 6.04-4.466 9.529-4.753 3.407-.28 6.83.495 9.741 2.326 5.727 3.603 7.612 10.833 5.572 17.162z"
+            fill={color}
+        />
+        <Path
+            d="M20.168 27.738c.346 1.143 1.525 1.963 2.364 2.774.962.928 1.954 1.804 2.867 2.784.467.498 1.434.55 1.89 0 2.902-3.507 6.043-6.82 8.584-10.614.67-.998-.824-2.132-1.635-1.279-3.06 3.218-5.747 6.787-8.839 9.977h1.89c-.866-1.096-1.769-2.229-2.835-3.134-.933-.794-1.994-1.847-3.25-1.89-.685-.022-1.238.719-1.036 1.382zM42.325 11.47c.53-.53.95-1.223 1.424-1.81.436-.543 1.029-1.066.893-1.824-.032-.17-.188-.293-.34-.346-.805-.272-1.55.588-1.997 1.159-.528.673-.984 1.493-1.09 2.354-.074.595.745.833 1.11.468zM11.566 42.945c-.787-.086-1.633.462-2.223.938-.59.475-1.145 1.215-1.115 2.016.01.28.281.54.57.44.612-.212 1.105-.658 1.623-1.038s1.19-.618 1.668-1.073c.513-.485.072-1.218-.523-1.283zM36.532 47.473c.306.275.417 1.075.59 1.45.286.629.616 1.204.981 1.787.366.583 1.316.218 1.12-.478-.244-.868-.505-1.756-.944-2.55-.309-.557-.76-1.027-1.444-.95-.333.038-.607.465-.303.74zM21.55 7.233c.338-.588.09-1.259-.057-1.876a8.01 8.01 0 0 0-.83-2.1c-.258-.452-1.05-.282-1.013.278.054.76.202 1.491.461 2.207.215.585.38 1.318.977 1.61.163.081.363.048.46-.122l.002.003zM2.313 23.724c1.515.58 3.21.65 4.807.83.864.098 1.021-1.308.202-1.52-1.616-.418-3.39-.706-5.011-.17-.432.142-.402.705 0 .86h.002zM47.808 32.327c.323.548.987.786 1.556.993.682.248 1.333.38 2.053.46.615.07.79-.852.304-1.135-.6-.348-1.167-.6-1.826-.806-.555-.172-1.263-.402-1.823-.165-.255.108-.425.383-.262.656l-.002-.003z"
+            fill={color}
+        />
+    </Svg>
+);
diff --git a/suite-native/atoms/src/Pictogram/SuccessShapeSvg.tsx b/suite-native/atoms/src/Pictogram/SuccessShapeSvg.tsx
@@ -0,0 +1,16 @@
+import Svg, { Rect } from 'react-native-svg';
+
+import { useNativeStyles } from '@trezor/styles';
+
+export const SuccessShapeSvg = () => {
+    const { utils } = useNativeStyles();
+    const borderColor = utils.colors.backgroundPrimarySubtleOnElevationNegative;
+    const backgroundColor = utils.colors.backgroundPrimarySubtleOnElevation1;
+
+    return (
+        <Svg width={112} height={112} fill="none">
+            <Rect x="4" y="4" width="104" height="104" rx="52" fill={borderColor} />
+            <Rect x="16" y="16" width="80" height="80" rx="40" fill={backgroundColor} />
+        </Svg>
+    );
+};
diff --git a/suite-native/atoms/src/Pictogram/WarningIconSvg.tsx b/suite-native/atoms/src/Pictogram/WarningIconSvg.tsx
@@ -0,0 +1,16 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { PictogramIconSvgProps } from './types';
+
+export const WarningIconSvg = ({ color }: PictogramIconSvgProps) => (
+    <Svg width={40} height={40} fill="none">
+        <Path
+            d="M38.016 30.76c-2.755-4.576-5.705-9.042-8.473-13.612a1372.29 1372.29 0 0 1-4.123-6.863c-.733-1.225-1.43-2.481-2.214-3.674-.759-1.152-1.503-2.658-2.645-3.459a.65.65 0 0 0-.446-.108.653.653 0 0 0-.446.11c-1.099.779-1.782 2.198-2.517 3.305-.792 1.193-1.485 2.455-2.214 3.685-1.392 2.351-2.784 4.702-4.19 7.045-2.747 4.582-5.677 9.06-8.411 13.65a1.47 1.47 0 0 0-.127.273c-.257.35-.171.964.243 1.153.356.389.96.578 1.491.39 1.027.137 2.136.098 3.092.143 1.439.067 2.888.04 4.329.054 2.877.026 5.754.051 8.633.06 5.62.02 11.283.115 16.896-.213a1.3 1.3 0 0 0 .889-.39c.415-.35.609-.931.235-1.551l-.002.002zm-18.026-.354c-2.814.013-5.628.013-8.44.009-1.504-.001-3.016-.051-4.52.01-.413.015-.855.017-1.306.022 2.546-3.908 4.87-7.98 7.229-11.992 1.353-2.3 2.693-4.608 4.033-6.916.717-1.235 1.479-2.454 2.139-3.716.304-.58.677-1.195 1.003-1.83.298.567.633 1.116.907 1.647.66 1.27 1.427 2.487 2.151 3.723a1437.88 1437.88 0 0 0 4.16 7.06c2.332 3.922 4.628 7.9 7.133 11.727-4.83.062-9.66.239-14.489.26v-.004z"
+            fill={color}
+        />
+        <Path
+            d="M20.767 22.24c.221-2.801.07-5.614.061-8.424-.002-1.312-2.076-1.309-2.07.005.006 2.812.003 5.62.244 8.424.095 1.117 1.679 1.116 1.767-.004h-.002zM21.366 25.875a1.713 1.713 0 0 0-1.192-1.13c-.327-.087-.757-.05-1.046.136l-.273.21c-.1.1-.18.209-.241.33a1.4 1.4 0 0 0-.278.566c-.002.019-.002.035-.008.053a1.733 1.733 0 0 0-.031.233v.013c-.008.18.014.36.068.528.01.034.024.066.035.1l.04.095c.017.037.03.077.049.111a1.471 1.471 0 0 0 .984.73h.005c.046.01.091.02.14.026.091.015.182.023.27.02.229-.005.444-.067.637-.162l.018-.008c.049-.024.094-.053.14-.082.037-.022.072-.045.107-.07a1.594 1.594 0 0 0 .166-.135c.094-.09.193-.214.26-.325.034-.058.058-.127.082-.185.022-.048.065-.135.083-.2.035-.133.053-.292.055-.429a2.85 2.85 0 0 0-.051-.37c-.006-.02-.008-.04-.017-.058l-.002.003zM10.427 13.01c1.099-.883 1.793-2.452 2.533-3.624.454-.718.896-1.44 1.328-2.17.37-.628.842-1.234.979-1.953.036-.188-.383-.53-.576-.384-1.107.832-1.823 2.407-2.546 3.564-.807 1.29-1.917 2.623-2.525 4.006-.175.4.46.845.81.563l-.003-.002zM34.983 35.128c-.64-.32-1.304-.203-1.99-.197l-2.304.024c-1.321.013-3.018-.29-4.258.302-.25.12-.246.493.002.613 1.24.602 2.933.303 4.26.324l2.094.034c.739.012 1.508.159 2.199-.182.374-.186.368-.734-.003-.92v.002z"
+            fill={color}
+        />
+    </Svg>
+);
diff --git a/suite-native/atoms/src/Pictogram/WarningShapeSvg.tsx b/suite-native/atoms/src/Pictogram/WarningShapeSvg.tsx
@@ -0,0 +1,22 @@
+import Svg, { Path } from 'react-native-svg';
+
+import { useNativeStyles } from '@trezor/styles';
+
+export const WarningShapeSvg = () => {
+    const { utils } = useNativeStyles();
+    const borderColor = utils.colors.backgroundAlertYellowSubtleOnElevationNegative;
+    const backgroundColor = utils.colors.backgroundAlertYellowSubtleOnElevation1;
+
+    return (
+        <Svg width={112} height={112} fill="none">
+            <Path
+                d="M103.916 104C110.125 104 113.967 97.2358 110.788 91.9032L62.8665 11.5262C59.7635 6.32172 52.2259 6.32202 49.1233 11.5268L1.21057 91.9038C-1.96816 97.2363 1.87422 104 8.08231 104H103.916Z"
+                fill={borderColor}
+            />
+            <Path
+                d="M93.3051 92.64C95.6251 92.64 97.0671 90.1194 95.8913 88.1195L58.4176 24.3846C57.2577 22.4119 54.405 22.412 53.2453 24.3848L15.7784 88.1197C14.6027 90.1196 16.0448 92.64 18.3646 92.64H93.3051Z"
+                fill={backgroundColor}
+            />
+        </Svg>
+    );
+};
diff --git a/suite-native/atoms/src/Pictogram/types.ts b/suite-native/atoms/src/Pictogram/types.ts
@@ -0,0 +1,5 @@
+import { CSSColor } from '@trezor/theme';
+
+export type PictogramIconSvgProps = {
+    color: CSSColor;
+};