From 1c55dc92c627120c4bf2e9ba961d5265baee935a Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Thu, 14 Nov 2024 18:34:36 +0500
Subject: [PATCH] feat(plasma-b2c,star-ds): Add icons using to stories

---
 .../plasma-b2c/platforms/mobile/package.json  |  1 +
 .../plasma-b2c/platforms/tv/package.json      |  1 +
 .../src/components/Button/Button.stories.tsx  |  6 +--
 .../src/components/Cell/Cell.stories.tsx      | 40 ++++----------
 .../Focusable/Focusable.stories.tsx           | 50 +++++-------------
 .../IconButton/IconButton.stories.tsx         | 21 +-------
 .../src/components/List/List.stories.tsx      | 52 ++++---------------
 .../TextField/TextField.stories.tsx           | 16 ++----
 .../star-ds/platforms/mobile/package.json     |  1 +
 libraries/star-ds/platforms/tv/package.json   |  1 +
 .../src/components/Button/Button.stories.tsx  |  6 +--
 .../src/components/Cell/Cell.stories.tsx      | 40 ++++----------
 .../Focusable/Focusable.stories.tsx           | 50 +++++-------------
 .../IconButton/IconButton.stories.tsx         | 21 +-------
 .../src/components/List/List.stories.tsx      | 52 ++++---------------
 .../TextField/TextField.stories.tsx           | 16 ++----
 16 files changed, 88 insertions(+), 286 deletions(-)

diff --git a/libraries/plasma-b2c/platforms/mobile/package.json b/libraries/plasma-b2c/platforms/mobile/package.json
index 0ff383b9..153b70df 100644
--- a/libraries/plasma-b2c/platforms/mobile/package.json
+++ b/libraries/plasma-b2c/platforms/mobile/package.json
@@ -50,6 +50,7 @@
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
     "@react-native-tvos/config-tv": "^0.0.10",
+    "@salutejs/plasma-icons-native": "0.1.0",
     "@storybook/addon-ondevice-actions": "^7.6.16",
     "@storybook/addon-ondevice-controls": "^7.6.16",
     "@storybook/addon-ondevice-notes": "^7.6.19",
diff --git a/libraries/plasma-b2c/platforms/tv/package.json b/libraries/plasma-b2c/platforms/tv/package.json
index 9db320e3..70c958f7 100644
--- a/libraries/plasma-b2c/platforms/tv/package.json
+++ b/libraries/plasma-b2c/platforms/tv/package.json
@@ -56,6 +56,7 @@
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
     "@react-native-tvos/config-tv": "^0.0.10",
+    "@salutejs/plasma-icons-native": "0.1.0",
     "@storybook/addon-ondevice-actions": "^7.6.16",
     "@storybook/addon-ondevice-controls": "^7.6.16",
     "@storybook/addon-ondevice-notes": "^7.6.19",
diff --git a/libraries/plasma-b2c/src/components/Button/Button.stories.tsx b/libraries/plasma-b2c/src/components/Button/Button.stories.tsx
index 74ec7d6c..8af8fe3c 100644
--- a/libraries/plasma-b2c/src/components/Button/Button.stories.tsx
+++ b/libraries/plasma-b2c/src/components/Button/Button.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Text } from 'react-native';
+import { IconPlasma } from '@salutejs/plasma-icons-native';
 
 import { Button } from './Button';
 
@@ -110,8 +110,8 @@ const StoryDefault = (props: StoryButtonProps) => {
         <Button
             {...props}
             onPress={onPress}
-            contentLeft={props.showLeftContent && <Text style={{ color: 'red' }}>Left Content</Text>}
-            contentRight={props.showRightContent && <Text style={{ color: 'green' }}>Right Content</Text>}
+            contentLeft={props.showLeftContent && <IconPlasma />}
+            contentRight={props.showRightContent && <IconPlasma />}
         />
     );
 };
diff --git a/libraries/plasma-b2c/src/components/Cell/Cell.stories.tsx b/libraries/plasma-b2c/src/components/Cell/Cell.stories.tsx
index f453c669..dafbdb07 100644
--- a/libraries/plasma-b2c/src/components/Cell/Cell.stories.tsx
+++ b/libraries/plasma-b2c/src/components/Cell/Cell.stories.tsx
@@ -1,7 +1,7 @@
 import { View, Text } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Path, Svg } from 'react-native-svg';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Checkbox } from '../Checkbox';
 import { Radiobox } from '../Radiobox';
@@ -79,38 +79,18 @@ const meta: Meta<CellProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const StoryDefault = (props: StoryCellProps) => {
     return (
         <View style={{ gap: 20 }}>
-            <Cell contentLeft={<ContentLeft />} contentRight={<PlasmaIcon />} {...props} />
-            <Cell contentLeft={<ContentLeft />} {...props} />
-            <Cell hasDisclosure contentLeft={<ContentLeft />} {...props} />
-            <Cell disclosureText="Disclosure" hasDisclosure contentLeft={<ContentLeft />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Checkbox checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Radiobox checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Switch checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Text>Plain text</Text>} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<BodyM>BodyM</BodyM>} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<IconPlasma />} {...props} />
+            <Cell contentLeft={<IconShazam />} {...props} />
+            <Cell hasDisclosure contentLeft={<IconShazam />} {...props} />
+            <Cell disclosureText="Disclosure" hasDisclosure contentLeft={<IconShazam />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Checkbox checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Radiobox checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Switch checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Text>Plain text</Text>} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<BodyM>BodyM</BodyM>} {...props} />
         </View>
     );
 };
diff --git a/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx b/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx
index 79c6a38e..19c1bc23 100644
--- a/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx
+++ b/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx
@@ -1,7 +1,7 @@
 import { View, Text } from 'react-native';
 import React, { useState } from 'react';
-import { Path, Svg } from 'react-native-svg';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
@@ -17,28 +17,6 @@ import { List } from '../List';
 import { IconButton } from '../IconButton';
 import { FocusContainer } from '../FocusContainer';
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-// TODO: перенести для примеров в другое место
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const meta: Meta = {
     title: 'Components/Focusable',
 };
@@ -88,9 +66,9 @@ const StoryDefault = () => {
                     );
                 }}
             </FocusContainer>
-            <Button text="Button 2" contentLeft={<PlasmaIcon />} />
+            <Button text="Button 2" contentLeft={<IconPlasma />} />
             <IconButton>
-                <PlasmaIcon />
+                <IconPlasma />
             </IconButton>
             <Progress value={50} />
             <List
@@ -137,7 +115,7 @@ const StoryDefault = () => {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         hasDisclosure: true,
                     },
                     {
@@ -145,7 +123,7 @@ const StoryDefault = () => {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         disclosureText: 'Disclosure',
                         hasDisclosure: true,
                     },
@@ -153,42 +131,42 @@ const StoryDefault = () => {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Checkbox checked />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Radiobox />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Switch checked />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
-                        contentRight: <PlasmaIcon />,
+                        contentLeft: <IconShazam />,
+                        contentRight: <IconPlasma />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <BodyL>Hello</BodyL>,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Text>Plain text</Text>,
                     },
                 ]}
@@ -198,13 +176,13 @@ const StoryDefault = () => {
             <BodyL>Hello</BodyL>
             <TextField
                 label="Label"
-                contentLeft={<PlasmaIcon />}
+                contentLeft={<IconPlasma />}
                 captionLeft="Caption"
                 labelPlacement="inner"
                 value="Textfield value"
             />
             <BodyL>Example BodyL</BodyL>
-            <TextField label="Label" contentLeft={<PlasmaIcon />} captionLeft="Caption" value="Textfield value" />
+            <TextField label="Label" contentLeft={<IconPlasma />} captionLeft="Caption" value="Textfield value" />
             <Button text="Button 2" value="Value" spacing="space-between" stretching="filled" />
         </View>
     );
diff --git a/libraries/plasma-b2c/src/components/IconButton/IconButton.stories.tsx b/libraries/plasma-b2c/src/components/IconButton/IconButton.stories.tsx
index 4a634074..a3fa3dd0 100644
--- a/libraries/plasma-b2c/src/components/IconButton/IconButton.stories.tsx
+++ b/libraries/plasma-b2c/src/components/IconButton/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
-import Svg, { Path } from 'react-native-svg';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconPlasma } from '@salutejs/plasma-icons-native';
 
 import { IconButton } from './IconButton';
 
@@ -62,23 +62,6 @@ const meta: Meta<StoryButtonProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
 const StoryDefault = (props: StoryButtonProps) => {
     const onPress = () => {
         alert('Произошёл onPress');
@@ -86,7 +69,7 @@ const StoryDefault = (props: StoryButtonProps) => {
 
     return (
         <IconButton {...props} onPress={onPress}>
-            <PlasmaIcon />
+            <IconPlasma />
         </IconButton>
     );
 };
diff --git a/libraries/plasma-b2c/src/components/List/List.stories.tsx b/libraries/plasma-b2c/src/components/List/List.stories.tsx
index 490a7f18..29f36754 100644
--- a/libraries/plasma-b2c/src/components/List/List.stories.tsx
+++ b/libraries/plasma-b2c/src/components/List/List.stories.tsx
@@ -2,7 +2,7 @@ import { View, Text } from 'react-native';
 import { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Path, Svg } from 'react-native-svg';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Checkbox } from '../Checkbox';
 import { Radiobox } from '../Radiobox';
@@ -50,28 +50,6 @@ const meta: Meta<ListProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-// TODO: перенести для примеров в другое место
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<string, boolean>) => [
     {
         exampleWithDisclosure: true,
@@ -79,7 +57,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         onItemPress: () => {
             alert('Press on item');
         },
@@ -90,17 +68,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: (
-            <View
-                style={{
-                    backgroundColor: 'red',
-                    opacity: 0.25,
-                    width: 22,
-                    height: 22,
-                    borderRadius: 50,
-                }}
-            />
-        ),
+        contentLeft: <IconShazam />,
         onItemPress: () => {
             alert('Press on item');
         },
@@ -111,7 +79,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'checkboxChecked',
         contentRight: <Checkbox checked={checkboxChecked} />,
     },
@@ -119,7 +87,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'radioboxChecked',
         contentRight: <Radiobox checked={radioboxChecked} />,
     },
@@ -127,7 +95,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'switchChecked',
         contentRight: <Switch checked={switchChecked} />,
     },
@@ -135,21 +103,21 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
-        contentRight: <PlasmaIcon />,
+        contentLeft: <IconShazam />,
+        contentRight: <IconPlasma />,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         contentRight: <BodyL>Hello</BodyL>,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         contentRight: <Text>Plain text</Text>,
     },
 ];
diff --git a/libraries/plasma-b2c/src/components/TextField/TextField.stories.tsx b/libraries/plasma-b2c/src/components/TextField/TextField.stories.tsx
index 49dfdcad..371b2665 100644
--- a/libraries/plasma-b2c/src/components/TextField/TextField.stories.tsx
+++ b/libraries/plasma-b2c/src/components/TextField/TextField.stories.tsx
@@ -1,7 +1,7 @@
-import { View } from 'react-native';
 import { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconScribbleDiagonal, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { TextField } from './TextField';
 
@@ -85,18 +85,8 @@ const StoryDefault = (props: StoryTextFieldProps) => {
             {...props}
             value={value}
             onValueChange={onValueChange}
-            contentLeft={
-                props.showLeftContent && (
-                    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-                )
-            }
-            contentRight={
-                props.showRightContent && (
-                    <View
-                        style={{ backgroundColor: 'green', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }}
-                    />
-                )
-            }
+            contentLeft={props.showLeftContent && <IconScribbleDiagonal />}
+            contentRight={props.showRightContent && <IconShazam />}
         />
     );
 };
diff --git a/libraries/star-ds/platforms/mobile/package.json b/libraries/star-ds/platforms/mobile/package.json
index d11f5a0d..6404f4ca 100644
--- a/libraries/star-ds/platforms/mobile/package.json
+++ b/libraries/star-ds/platforms/mobile/package.json
@@ -50,6 +50,7 @@
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
     "@react-native-tvos/config-tv": "^0.0.10",
+    "@salutejs/plasma-icons-native": "0.1.0",
     "@storybook/addon-ondevice-actions": "^7.6.16",
     "@storybook/addon-ondevice-controls": "^7.6.16",
     "@storybook/addon-ondevice-notes": "^7.6.19",
diff --git a/libraries/star-ds/platforms/tv/package.json b/libraries/star-ds/platforms/tv/package.json
index cddbc821..8e5f8364 100644
--- a/libraries/star-ds/platforms/tv/package.json
+++ b/libraries/star-ds/platforms/tv/package.json
@@ -56,6 +56,7 @@
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
     "@react-native-tvos/config-tv": "^0.0.10",
+    "@salutejs/plasma-icons-native": "0.1.0",
     "@storybook/addon-ondevice-actions": "^7.6.16",
     "@storybook/addon-ondevice-controls": "^7.6.16",
     "@storybook/addon-ondevice-notes": "^7.6.19",
diff --git a/libraries/star-ds/src/components/Button/Button.stories.tsx b/libraries/star-ds/src/components/Button/Button.stories.tsx
index a217d0b6..8c8f1c50 100644
--- a/libraries/star-ds/src/components/Button/Button.stories.tsx
+++ b/libraries/star-ds/src/components/Button/Button.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Text } from 'react-native';
+import { IconPlasma } from '@salutejs/plasma-icons-native';
 
 import { Button } from './Button';
 
@@ -99,8 +99,8 @@ const StoryDefault = (props: StoryButtonProps) => {
         <Button
             {...props}
             onPress={onPress}
-            contentLeft={props.showLeftContent && <Text style={{ color: 'red' }}>Left Content</Text>}
-            contentRight={props.showRightContent && <Text style={{ color: 'green' }}>Right Content</Text>}
+            contentLeft={props.showLeftContent && <IconPlasma />}
+            contentRight={props.showRightContent && <IconPlasma />}
         />
     );
 };
diff --git a/libraries/star-ds/src/components/Cell/Cell.stories.tsx b/libraries/star-ds/src/components/Cell/Cell.stories.tsx
index f453c669..dafbdb07 100644
--- a/libraries/star-ds/src/components/Cell/Cell.stories.tsx
+++ b/libraries/star-ds/src/components/Cell/Cell.stories.tsx
@@ -1,7 +1,7 @@
 import { View, Text } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Path, Svg } from 'react-native-svg';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Checkbox } from '../Checkbox';
 import { Radiobox } from '../Radiobox';
@@ -79,38 +79,18 @@ const meta: Meta<CellProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const StoryDefault = (props: StoryCellProps) => {
     return (
         <View style={{ gap: 20 }}>
-            <Cell contentLeft={<ContentLeft />} contentRight={<PlasmaIcon />} {...props} />
-            <Cell contentLeft={<ContentLeft />} {...props} />
-            <Cell hasDisclosure contentLeft={<ContentLeft />} {...props} />
-            <Cell disclosureText="Disclosure" hasDisclosure contentLeft={<ContentLeft />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Checkbox checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Radiobox checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Switch checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Text>Plain text</Text>} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<BodyM>BodyM</BodyM>} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<IconPlasma />} {...props} />
+            <Cell contentLeft={<IconShazam />} {...props} />
+            <Cell hasDisclosure contentLeft={<IconShazam />} {...props} />
+            <Cell disclosureText="Disclosure" hasDisclosure contentLeft={<IconShazam />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Checkbox checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Radiobox checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Switch checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Text>Plain text</Text>} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<BodyM>BodyM</BodyM>} {...props} />
         </View>
     );
 };
diff --git a/libraries/star-ds/src/components/Focusable/Focusable.stories.tsx b/libraries/star-ds/src/components/Focusable/Focusable.stories.tsx
index 79c6a38e..19c1bc23 100644
--- a/libraries/star-ds/src/components/Focusable/Focusable.stories.tsx
+++ b/libraries/star-ds/src/components/Focusable/Focusable.stories.tsx
@@ -1,7 +1,7 @@
 import { View, Text } from 'react-native';
 import React, { useState } from 'react';
-import { Path, Svg } from 'react-native-svg';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
@@ -17,28 +17,6 @@ import { List } from '../List';
 import { IconButton } from '../IconButton';
 import { FocusContainer } from '../FocusContainer';
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-// TODO: перенести для примеров в другое место
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const meta: Meta = {
     title: 'Components/Focusable',
 };
@@ -88,9 +66,9 @@ const StoryDefault = () => {
                     );
                 }}
             </FocusContainer>
-            <Button text="Button 2" contentLeft={<PlasmaIcon />} />
+            <Button text="Button 2" contentLeft={<IconPlasma />} />
             <IconButton>
-                <PlasmaIcon />
+                <IconPlasma />
             </IconButton>
             <Progress value={50} />
             <List
@@ -137,7 +115,7 @@ const StoryDefault = () => {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         hasDisclosure: true,
                     },
                     {
@@ -145,7 +123,7 @@ const StoryDefault = () => {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         disclosureText: 'Disclosure',
                         hasDisclosure: true,
                     },
@@ -153,42 +131,42 @@ const StoryDefault = () => {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Checkbox checked />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Radiobox />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Switch checked />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
-                        contentRight: <PlasmaIcon />,
+                        contentLeft: <IconShazam />,
+                        contentRight: <IconPlasma />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <BodyL>Hello</BodyL>,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Text>Plain text</Text>,
                     },
                 ]}
@@ -198,13 +176,13 @@ const StoryDefault = () => {
             <BodyL>Hello</BodyL>
             <TextField
                 label="Label"
-                contentLeft={<PlasmaIcon />}
+                contentLeft={<IconPlasma />}
                 captionLeft="Caption"
                 labelPlacement="inner"
                 value="Textfield value"
             />
             <BodyL>Example BodyL</BodyL>
-            <TextField label="Label" contentLeft={<PlasmaIcon />} captionLeft="Caption" value="Textfield value" />
+            <TextField label="Label" contentLeft={<IconPlasma />} captionLeft="Caption" value="Textfield value" />
             <Button text="Button 2" value="Value" spacing="space-between" stretching="filled" />
         </View>
     );
diff --git a/libraries/star-ds/src/components/IconButton/IconButton.stories.tsx b/libraries/star-ds/src/components/IconButton/IconButton.stories.tsx
index 4a634074..a3fa3dd0 100644
--- a/libraries/star-ds/src/components/IconButton/IconButton.stories.tsx
+++ b/libraries/star-ds/src/components/IconButton/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
-import Svg, { Path } from 'react-native-svg';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconPlasma } from '@salutejs/plasma-icons-native';
 
 import { IconButton } from './IconButton';
 
@@ -62,23 +62,6 @@ const meta: Meta<StoryButtonProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
 const StoryDefault = (props: StoryButtonProps) => {
     const onPress = () => {
         alert('Произошёл onPress');
@@ -86,7 +69,7 @@ const StoryDefault = (props: StoryButtonProps) => {
 
     return (
         <IconButton {...props} onPress={onPress}>
-            <PlasmaIcon />
+            <IconPlasma />
         </IconButton>
     );
 };
diff --git a/libraries/star-ds/src/components/List/List.stories.tsx b/libraries/star-ds/src/components/List/List.stories.tsx
index 490a7f18..29f36754 100644
--- a/libraries/star-ds/src/components/List/List.stories.tsx
+++ b/libraries/star-ds/src/components/List/List.stories.tsx
@@ -2,7 +2,7 @@ import { View, Text } from 'react-native';
 import { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Path, Svg } from 'react-native-svg';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Checkbox } from '../Checkbox';
 import { Radiobox } from '../Radiobox';
@@ -50,28 +50,6 @@ const meta: Meta<ListProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-// TODO: перенести для примеров в другое место
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<string, boolean>) => [
     {
         exampleWithDisclosure: true,
@@ -79,7 +57,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         onItemPress: () => {
             alert('Press on item');
         },
@@ -90,17 +68,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: (
-            <View
-                style={{
-                    backgroundColor: 'red',
-                    opacity: 0.25,
-                    width: 22,
-                    height: 22,
-                    borderRadius: 50,
-                }}
-            />
-        ),
+        contentLeft: <IconShazam />,
         onItemPress: () => {
             alert('Press on item');
         },
@@ -111,7 +79,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'checkboxChecked',
         contentRight: <Checkbox checked={checkboxChecked} />,
     },
@@ -119,7 +87,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'radioboxChecked',
         contentRight: <Radiobox checked={radioboxChecked} />,
     },
@@ -127,7 +95,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'switchChecked',
         contentRight: <Switch checked={switchChecked} />,
     },
@@ -135,21 +103,21 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
-        contentRight: <PlasmaIcon />,
+        contentLeft: <IconShazam />,
+        contentRight: <IconPlasma />,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         contentRight: <BodyL>Hello</BodyL>,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         contentRight: <Text>Plain text</Text>,
     },
 ];
diff --git a/libraries/star-ds/src/components/TextField/TextField.stories.tsx b/libraries/star-ds/src/components/TextField/TextField.stories.tsx
index 4ba266a6..a3b12950 100644
--- a/libraries/star-ds/src/components/TextField/TextField.stories.tsx
+++ b/libraries/star-ds/src/components/TextField/TextField.stories.tsx
@@ -1,7 +1,7 @@
-import { View } from 'react-native';
 import { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconScribbleDiagonal, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { TextField } from './TextField';
 
@@ -85,18 +85,8 @@ const StoryDefault = (props: StoryTextFieldProps) => {
             {...props}
             value={value}
             onValueChange={onValueChange}
-            contentLeft={
-                props.showLeftContent && (
-                    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-                )
-            }
-            contentRight={
-                props.showRightContent && (
-                    <View
-                        style={{ backgroundColor: 'green', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }}
-                    />
-                )
-            }
+            contentLeft={props.showLeftContent && <IconScribbleDiagonal />}
+            contentRight={props.showRightContent && <IconShazam />}
         />
     );
 };