diff --git a/src/assets/hudozka-logo.png b/src/assets/hudozka-logo.png
new file mode 100644
index 00000000..ca9e6a3b
Binary files /dev/null and b/src/assets/hudozka-logo.png differ
diff --git a/src/components/HudozkaLogo/index.tsx b/src/components/HudozkaLogo/index.tsx
new file mode 100644
index 00000000..4e03f39e
--- /dev/null
+++ b/src/components/HudozkaLogo/index.tsx
@@ -0,0 +1,19 @@
+import s from "./logo.module.css"
+
+import Image from "next/future/image"
+import image from "src/assets/hudozka-logo.png"
+
+export type HudozkaLogoProps = {
+    dark?: boolean
+}
+
+export const HudozkaLogo: React.FC<HudozkaLogoProps> = ({ dark }) => (
+    <div className={`${s.container} ${dark ? s.dark : ""}`}>
+        <Image
+            src={image}
+            width={36}
+            height={36}
+            alt={"Hudozka"}
+        />
+    </div>
+)
diff --git a/src/components/HudozkaLogo/logo.module.css b/src/components/HudozkaLogo/logo.module.css
new file mode 100644
index 00000000..4bda5ec5
--- /dev/null
+++ b/src/components/HudozkaLogo/logo.module.css
@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: var(--size-l);
+  height: var(--size-l);
+
+  border-radius: var(--radius-small);
+}
+
+.dark {
+  background-color: #f9ea12;
+
+  --shadow-color: 60deg 100% 29%;
+  --shadow-elevation-high:
+      0px 0.1px 0.1px hsl(var(--shadow-color) / 0.34),
+      0px 0.4px 0.5px -0.4px hsl(var(--shadow-color) / 0.34),
+      0px 0.8px 0.9px -0.7px hsl(var(--shadow-color) / 0.34),
+      0px 1.3px 1.5px -1.1px hsl(var(--shadow-color) / 0.34),
+      0px 2.1px 2.4px -1.4px hsl(var(--shadow-color) / 0.34),
+      0px 3.3px 3.7px -1.8px hsl(var(--shadow-color) / 0.34),
+      -0.1px 5.1px 5.7px -2.1px hsl(var(--shadow-color) / 0.34),
+      -0.1px 7.5px 8.4px -2.5px hsl(var(--shadow-color) / 0.34);
+
+  box-shadow: var(--shadow-elevation-high);
+}
+
+.dark img {
+  filter: invert(0%);
+}