diff --git a/packages/core/src/main/ts/icon/CircleBellIcon.tsx b/packages/core/src/main/ts/icon/CircleBellIcon.tsx
new file mode 100644
index 000000000..ee7febcaa
--- /dev/null
+++ b/packages/core/src/main/ts/icon/CircleBellIcon.tsx
@@ -0,0 +1,34 @@
+import React, { FC } from 'react'
+
+import { getDataProps } from '../dataProps'
+import { Circle, Path, Svg } from '../primitive'
+
+export interface CircleBellIconProps {
+  size?: number
+  color?: string
+}
+
+export const CircleBellIcon: FC<CircleBellIconProps> = ({ size = 6, color = '#000', ...rest }) => (
+  <Svg
+    {...getDataProps(rest)}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Circle cx="12" cy="12" r="12" fill={color}/>
+    <Path
+      d="M14.7361 4.48278C13.9576 4.19945 13.0968 4.60083 12.8135 5.37929L12.6862 5.72908C12.6528 5.82088 12.5579 5.87435 12.461 5.86206C11.1017 5.68971 9.75556 6.47136 9.26719 7.81317L8.58314 9.69255C8.31597 10.4266 7.57608 10.8722 6.85469 11.3066C6.55604 11.4864 6.26057 11.6643 6.00311 11.8601C5.70806 12.0843 5.47185 12.3931 5.33568 12.7673C4.95789 13.8052 5.49307 14.9529 6.53102 15.3307L14.0486 18.0669C15.0865 18.4447 16.2342 17.9095 16.612 16.8715C16.7482 16.4974 16.7657 16.109 16.6839 15.7475C16.6124 15.4321 16.5005 15.1059 16.3873 14.7762C16.1139 13.9797 15.8335 13.1628 16.1007 12.4287L16.7847 10.5493C17.2731 9.20752 16.7443 7.74347 15.5923 7.00175C15.5101 6.94887 15.4718 6.84694 15.5053 6.75514L15.6326 6.40535C15.9159 5.62689 15.5145 4.76612 14.7361 4.48278Z"
+      fill="white"/>
+    <Path
+      d="M8.2563 17.023C8.1525 16.9852 8.03666 17.0386 8.0093 17.1456C7.75776 18.1297 8.28909 19.1633 9.2637 19.518C10.2383 19.8727 11.3097 19.4225 11.7496 18.507C11.7974 18.4074 11.743 18.292 11.6392 18.2543L8.2563 17.023Z"
+      fill="white"/>
+  </Svg>
+)
+
+CircleBellIcon.displayName = 'CircleBellIcon'
+
+CircleBellIcon.defaultProps = {
+  size: 6,
+  color: '#000',
+}
diff --git a/packages/core/src/main/ts/icon/Icon.md b/packages/core/src/main/ts/icon/Icon.md
index 9c91c9169..56f7ef10c 100644
--- a/packages/core/src/main/ts/icon/Icon.md
+++ b/packages/core/src/main/ts/icon/Icon.md
@@ -70,11 +70,18 @@ return (
         <FlexItem
           width={6}
           height={6}
+          mr={6}
           cursor="pointer"
           onClick={() => setFeedIconActive(!feedIconActive)}
         >
           <FeedIcon data-testid="icon" active={feedIconActive} />
         </FlexItem>
+        <FlexItem
+          width={6}
+          height={6}
+        >
+          <CircleBellIcon data-testid="icon" color="#865ED3" />
+        </FlexItem>
       </Flex>
     </BlockContent>
   </Block>
diff --git a/packages/core/src/main/ts/icon/index.ts b/packages/core/src/main/ts/icon/index.ts
index c99b56d77..5feef5dea 100644
--- a/packages/core/src/main/ts/icon/index.ts
+++ b/packages/core/src/main/ts/icon/index.ts
@@ -3,6 +3,7 @@ export * from './Icon'
 export * from './QuestionIcon'
 export * from './FilterIcon'
 export * from './FeedIcon'
+export * from './CircleBellIcon'
 
 export * from './MobileAppIcon'
 
diff --git a/packages/desktop/src/main/resources/screenshots/CustomAlert_1_desktop.png b/packages/desktop/src/main/resources/screenshots/CustomAlert_1_desktop.png
new file mode 100644
index 000000000..e79077a37
Binary files /dev/null and b/packages/desktop/src/main/resources/screenshots/CustomAlert_1_desktop.png differ
diff --git a/packages/desktop/src/main/resources/screenshots/Icon_2_desktop.png b/packages/desktop/src/main/resources/screenshots/Icon_2_desktop.png
index 9e03b33ef..299f6ecae 100644
Binary files a/packages/desktop/src/main/resources/screenshots/Icon_2_desktop.png and b/packages/desktop/src/main/resources/screenshots/Icon_2_desktop.png differ
diff --git a/packages/desktop/src/main/ts/custom-alert/CustomAlert.md b/packages/desktop/src/main/ts/custom-alert/CustomAlert.md
new file mode 100644
index 000000000..b12b47690
--- /dev/null
+++ b/packages/desktop/src/main/ts/custom-alert/CustomAlert.md
@@ -0,0 +1,25 @@
+```jsx
+<CustomAlert
+    data-testid="custom-alert"
+    icon={<CircleBellIcon color="#865ED3"/>}
+    bg="#EEE4FF"
+    onHide={() => null}
+>
+    <Flex align="center">
+        <FlexItem>
+            <Text>
+                Это QIWI Кошелек со счётом в тенге — пользуйтесь им как обычно. Кошелёк со счётом в рублях, долларах и
+                евро переехал на другой сайт. Чтобы проверить статус требования о возврате, перейдите на qiwiwallet.ru
+            </Text>
+        </FlexItem>
+        <FlexItem ml={4}>
+            <Button
+                data-testid="button"
+                kind="simple"
+                size="minor"
+                text="Подробнее"
+            />
+        </FlexItem>
+    </Flex>
+</CustomAlert>
+```
diff --git a/packages/desktop/src/main/ts/custom-alert/CustomAlert.tsx b/packages/desktop/src/main/ts/custom-alert/CustomAlert.tsx
new file mode 100644
index 000000000..e4a9bc62c
--- /dev/null
+++ b/packages/desktop/src/main/ts/custom-alert/CustomAlert.tsx
@@ -0,0 +1,82 @@
+import {
+  AlertBlockControl,
+  Breaker,
+  Card,
+  FlexItem,
+  FlexPos,
+  getDataProps,
+  Icon,
+  Pos,
+} from '@qiwi/pijma-core'
+import React, { FC, ReactNode } from 'react'
+
+import { Paragraph } from '../typography'
+
+export interface CustomAlertProps {
+  icon?: ReactNode
+  shadow?: string
+  bg: string
+  textColor: 'inverse' | 'default'
+  children?: ReactNode
+  onHide?: () => void
+}
+
+export const CustomAlert: FC<CustomAlertProps> = ({
+  children,
+  icon,
+  bg,
+  shadow,
+  textColor,
+  onHide,
+  ...rest
+}) => {
+  return (
+    <AlertBlockControl
+      onHide={onHide}
+      children={(renderProps) => (
+        <Card
+          {...getDataProps(rest)}
+          bg={bg}
+          r={10}
+          transition="all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)"
+          s={shadow}
+        >
+          <FlexPos
+            display="flex"
+            type="relative"
+            py={5}
+            pl={6}
+            pr={onHide !== undefined ? 18 : 6}
+          >
+            {icon && <FlexItem mr={3}>{icon}</FlexItem>}
+            <FlexItem>
+              <Paragraph color={textColor}>
+                <Breaker children={children} />
+              </Paragraph>
+            </FlexItem>
+            {onHide !== undefined ? (
+              <Pos
+                cursor="pointer"
+                type="absolute"
+                right={6}
+                top={5}
+                onClick={renderProps.onCloseClick}
+                onMouseEnter={renderProps.onCloseMouseEnter}
+                onMouseLeave={renderProps.onCloseMouseLeave}
+                children={
+                  <Icon
+                    size={6}
+                    color={textColor === 'inverse' ? '#999' : '#666'}
+                    name="cross-small"
+                  />
+                }
+              />
+            ) : null}
+          </FlexPos>
+        </Card>
+      )}
+    />
+  )
+}
+
+CustomAlert.displayName = 'CustomAlert'
diff --git a/packages/desktop/src/main/ts/custom-alert/index.ts b/packages/desktop/src/main/ts/custom-alert/index.ts
new file mode 100644
index 000000000..16ee18786
--- /dev/null
+++ b/packages/desktop/src/main/ts/custom-alert/index.ts
@@ -0,0 +1 @@
+export * from './CustomAlert'
diff --git a/packages/mobile/src/main/resources/screenshots/CustomAlert_1_mobile.png b/packages/mobile/src/main/resources/screenshots/CustomAlert_1_mobile.png
new file mode 100644
index 000000000..4817925eb
Binary files /dev/null and b/packages/mobile/src/main/resources/screenshots/CustomAlert_1_mobile.png differ
diff --git a/packages/mobile/src/main/resources/screenshots/Icon_2_mobile.png b/packages/mobile/src/main/resources/screenshots/Icon_2_mobile.png
index d8c1435b3..a04cb92a6 100644
Binary files a/packages/mobile/src/main/resources/screenshots/Icon_2_mobile.png and b/packages/mobile/src/main/resources/screenshots/Icon_2_mobile.png differ
diff --git a/packages/mobile/src/main/ts/custom-alert/CustomAlert.md b/packages/mobile/src/main/ts/custom-alert/CustomAlert.md
new file mode 100644
index 000000000..b12b47690
--- /dev/null
+++ b/packages/mobile/src/main/ts/custom-alert/CustomAlert.md
@@ -0,0 +1,25 @@
+```jsx
+<CustomAlert
+    data-testid="custom-alert"
+    icon={<CircleBellIcon color="#865ED3"/>}
+    bg="#EEE4FF"
+    onHide={() => null}
+>
+    <Flex align="center">
+        <FlexItem>
+            <Text>
+                Это QIWI Кошелек со счётом в тенге — пользуйтесь им как обычно. Кошелёк со счётом в рублях, долларах и
+                евро переехал на другой сайт. Чтобы проверить статус требования о возврате, перейдите на qiwiwallet.ru
+            </Text>
+        </FlexItem>
+        <FlexItem ml={4}>
+            <Button
+                data-testid="button"
+                kind="simple"
+                size="minor"
+                text="Подробнее"
+            />
+        </FlexItem>
+    </Flex>
+</CustomAlert>
+```
diff --git a/packages/mobile/src/main/ts/custom-alert/CustomAlert.tsx b/packages/mobile/src/main/ts/custom-alert/CustomAlert.tsx
new file mode 100644
index 000000000..c861dcd0a
--- /dev/null
+++ b/packages/mobile/src/main/ts/custom-alert/CustomAlert.tsx
@@ -0,0 +1,82 @@
+import {
+  AlertBlockControl,
+  Breaker,
+  Card,
+  FlexItem,
+  FlexPos,
+  getDataProps,
+  Icon,
+  Pos,
+} from '@qiwi/pijma-core'
+import React, { FC, ReactNode } from 'react'
+
+import { Paragraph } from '../typography'
+
+export interface CustomAlertProps {
+  icon?: ReactNode
+  shadow?: string
+  bg: string
+  textColor: 'inverse' | 'default'
+  children?: ReactNode
+  onHide?: () => void
+}
+
+export const CustomAlert: FC<CustomAlertProps> = ({
+  children,
+  icon,
+  bg,
+  shadow,
+  textColor,
+  onHide,
+  ...rest
+}) => {
+  return (
+    <AlertBlockControl
+      onHide={onHide}
+      children={(renderProps) => (
+        <Card
+          {...getDataProps(rest)}
+          bg={bg}
+          r={10}
+          transition="all 300ms cubic-bezier(0.4, 0.0, 0.2, 1)"
+          s={shadow}
+        >
+          <FlexPos
+            display="flex"
+            type="relative"
+            py={4}
+            pl={4}
+            pr={onHide !== undefined ? 14 : 4}
+          >
+            {icon && <FlexItem mr={2}>{icon}</FlexItem>}
+            <FlexItem my="2px">
+              <Paragraph color={textColor}>
+                <Breaker children={children} />
+              </Paragraph>
+            </FlexItem>
+            {onHide !== undefined ? (
+              <Pos
+                cursor="pointer"
+                type="absolute"
+                right={4}
+                top={4}
+                onClick={renderProps.onCloseClick}
+                onMouseEnter={renderProps.onCloseMouseEnter}
+                onMouseLeave={renderProps.onCloseMouseLeave}
+                children={
+                  <Icon
+                    size={6}
+                    color={textColor === 'inverse' ? '#999' : '#666'}
+                    name="cross-small"
+                  />
+                }
+              />
+            ) : null}
+          </FlexPos>
+        </Card>
+      )}
+    />
+  )
+}
+
+CustomAlert.displayName = 'CustomAlert'
diff --git a/packages/mobile/src/main/ts/custom-alert/index.ts b/packages/mobile/src/main/ts/custom-alert/index.ts
new file mode 100644
index 000000000..16ee18786
--- /dev/null
+++ b/packages/mobile/src/main/ts/custom-alert/index.ts
@@ -0,0 +1 @@
+export * from './CustomAlert'