diff --git a/src/components/ToggleButton/ToggleButton.stories.ts b/src/components/ToggleButton/ToggleButton.stories.ts
index c3192cf5..d7598359 100644
--- a/src/components/ToggleButton/ToggleButton.stories.ts
+++ b/src/components/ToggleButton/ToggleButton.stories.ts
@@ -3,7 +3,9 @@ import { IconArrowDownRight, IconUser } from '@tabler/icons-react-native'
 
 import { ToggleButton } from './ToggleButton'
 
-const icons = { IconArrowDownRight, IconUser, none: undefined }
+const svgIcons = { IconArrowDownRight, IconUser, none: undefined }
+
+const imageIcons = { hotels: require('./hotels.png'), none: undefined }
 
 const meta: Meta<typeof ToggleButton> = {
   title: 'Form/ToggleButton',
@@ -16,6 +18,7 @@ const meta: Meta<typeof ToggleButton> = {
     label: 'ButtonToggle',
     size: 'base',
     Icon: IconArrowDownRight,
+    Image: undefined,
   },
   argTypes: {
     iconPos: {
@@ -24,7 +27,16 @@ const meta: Meta<typeof ToggleButton> = {
       mapping: { null: null },
     },
     size: { control: 'radio', options: ['xlarge', 'large', 'base', 'small'] },
-    Icon: { control: 'radio', options: Object.keys(icons), mapping: icons },
+    Icon: {
+      control: 'radio',
+      options: Object.keys(svgIcons),
+      mapping: svgIcons,
+    },
+    Image: {
+      control: 'radio',
+      options: Object.keys(imageIcons),
+      mapping: imageIcons,
+    },
     onPress: { action: 'onPress' },
   },
 }
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
index b8e0e140..5e5589d9 100644
--- a/src/components/ToggleButton/ToggleButton.tsx
+++ b/src/components/ToggleButton/ToggleButton.tsx
@@ -1,6 +1,8 @@
 import { memo, useCallback, useMemo, useState } from 'react'
 import {
   type AccessibilityProps,
+  Image,
+  type ImageSourcePropType,
   Pressable,
   type StyleProp,
   Text,
@@ -43,8 +45,10 @@ export interface ToggleButtonProps
   size?: 'xlarge' | 'large' | 'base' | 'small'
   /** Дополнительная стилизация для контейнера компонента */
   style?: StyleProp<ViewStyle>
-  /** SVG-иконка */
+  /** SVG-иконка. Если передана, то изображение не будет отображаться */
   Icon?: SvgSource
+  /** Изображение. Будет отображаться, только если не передана иконка Icon */
+  Image?: ImageSourcePropType
 }
 
 /**
@@ -62,6 +66,7 @@ export const ToggleButton = memo<ToggleButtonProps>(
     size = 'base',
     style,
     Icon,
+    Image: imageSource,
     testID,
     ...rest
   }) => {
@@ -80,6 +85,13 @@ export const ToggleButton = memo<ToggleButtonProps>(
         source={Icon}
         testID={ToggleButtonTestId.icon}
       />
+    ) : imageSource ? (
+      <Image
+        resizeMode='contain'
+        source={imageSource}
+        style={toggleStyles.icon}
+        testID={ToggleButtonTestId.icon}
+      />
     ) : null
 
     const onPressIn = useCallback(() => setPressed(true), [])
diff --git a/src/components/ToggleButton/__tests__/ToggleButton.test.tsx b/src/components/ToggleButton/__tests__/ToggleButton.test.tsx
index 60f1df2a..a218e61a 100644
--- a/src/components/ToggleButton/__tests__/ToggleButton.test.tsx
+++ b/src/components/ToggleButton/__tests__/ToggleButton.test.tsx
@@ -70,6 +70,16 @@ describe('ToggleButton', () => {
           iconPos: 'right',
         },
       ],
+      [
+        'checked = false, disabled = false, iconOnly = true, size = base, with PNG Icon',
+        {
+          checked: false,
+          disabled: false,
+          iconOnly: true,
+          size: 'base',
+          Image: require('../hotels.png'),
+        },
+      ],
     ]
 
     beforeAll(() => {
@@ -90,6 +100,84 @@ describe('ToggleButton', () => {
     })
   })
 
+  test('should render PNG Icon as Image', () => {
+    const { getByTestId } = render(
+      <ToggleButton
+        {...defaultProps}
+        iconOnly
+        Image={require('../hotels.png')}
+      />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('Image')
+  })
+
+  test('should render SVG Icon as Svg (uri)', async () => {
+    const originalFetch = global.fetch
+    jest
+      .spyOn(global, 'fetch')
+      .mockImplementation()
+      .mockResolvedValue({
+        ok: true,
+        status: 200,
+        text: async () =>
+          '<svg width="10" height="10"><path d="M0 0h10v10H0z" /></svg>',
+      } as Response)
+
+    try {
+      const { findByTestId } = render(
+        <ToggleButton
+          {...defaultProps}
+          iconOnly
+          Icon={{ uri: 'https://example.com/icon.svg' }}
+        />
+      )
+      const icon = await findByTestId(ToggleButtonTestId.icon)
+
+      expect(icon.type).toBe('RNSVGSvgView')
+    } finally {
+      global.fetch = originalFetch
+    }
+  })
+
+  test('should render SVG Icon as Svg (xml)', () => {
+    const { getByTestId } = render(
+      <ToggleButton
+        {...defaultProps}
+        iconOnly
+        Icon={{
+          xml: '<svg width="10" height="10"><path d="M0 0h10v10H0z" /></svg>',
+        }}
+      />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('RNSVGSvgView')
+  })
+
+  test('should render non-svg uri Icon as Image', () => {
+    const { getByTestId } = render(
+      <ToggleButton
+        {...defaultProps}
+        iconOnly
+        Image={{ uri: 'https://example.com/icon.png' }}
+      />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('Image')
+  })
+
+  test('should render numeric Icon as Image', () => {
+    const { getByTestId } = render(
+      <ToggleButton {...defaultProps} iconOnly Image={1} />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('Image')
+  })
+
   test('should handle press', async () => {
     const mockedOnPress = jest.fn()
     const { queryByTestId } = render(<ToggleButton onPress={mockedOnPress} />)
diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index 213d712b..d99139b2 100644
--- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -472,6 +472,70 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr
 </Pressable>
 `;
 
+exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = true, size = base, with PNG Icon 1`] = `
+<Pressable
+  disabled={false}
+  onPress={[MockFunction]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    [
+      {
+        "alignSelf": "flex-start",
+        "borderColor": "rgba(255, 255, 255, 0.0001)",
+        "borderRadius": 100,
+        "borderWidth": 1,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="ToggleButton"
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#e2e2e4",
+          "borderRadius": 100,
+          "flexDirection": "row",
+          "gap": 7,
+          "minHeight": 35,
+          "paddingHorizontal": 14,
+          "paddingVertical": 0,
+        },
+        {
+          "aspectRatio": 1,
+          "justifyContent": "center",
+          "paddingHorizontal": 0,
+          "paddingVertical": 0,
+        },
+      ]
+    }
+    testID="ToggleButton.container"
+  >
+    <Image
+      resizeMode="contain"
+      source={
+        {
+          "testUri": "../../../src/components/ToggleButton/hotels.png",
+        }
+      }
+      style={
+        {
+          "color": "#181a1f",
+          "height": 17.5,
+          "width": 17.5,
+        }
+      }
+      testID="ToggleButton.icon"
+    />
+  </View>
+</Pressable>
+`;
+
 exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = false, size = large, with Icon, with label 1`] = `
 <Pressable
   disabled={true}
diff --git a/src/components/ToggleButton/hotels.png b/src/components/ToggleButton/hotels.png
new file mode 100644
index 00000000..2056b6e8
Binary files /dev/null and b/src/components/ToggleButton/hotels.png differ