diff --git a/app/build/icon.png b/app/build/icon.png
index b9fd9a1..2101ed2 100644
Binary files a/app/build/icon.png and b/app/build/icon.png differ
diff --git a/app/renderer/assets/flame.png b/app/renderer/assets/flame.png
new file mode 100644
index 0000000..ba35797
Binary files /dev/null and b/app/renderer/assets/flame.png differ
diff --git a/app/renderer/components/FlameMark.tsx b/app/renderer/components/FlameMark.tsx
index a861c4b..82f7a7b 100644
--- a/app/renderer/components/FlameMark.tsx
+++ b/app/renderer/components/FlameMark.tsx
@@ -1,25 +1,14 @@
import { useMemo } from 'react'
import { motionEnabled } from '../lib/motion'
-
-// Hand-authored three-layer flame, retraced from the approved CodeBurn app icon
-// (app/build/icon.svg) minus the squircle: coral outer silhouette (left tongue +
-// tall right-curling tip + right tongue), a warmer amber mid layer, and a bright
-// cream core. Same path data and sampled fills as the icon so the splash, sidebar
-// and dock read as one mark. Coordinates share the icon's 1024 space; the viewBox
-// frames just the flame.
-const CORAL =
- 'M507 786C438 788 352 776 300 736C254 700 248 646 264 588C276 532 288 466 306 420C315 398 324 382 332 374C339 368 346 369 350 382C366 424 393 484 418 526C434 474 452 394 466 332C478 280 490 234 500 198C508 178 524 172 542 186C566 206 590 232 608 264C612 314 620 394 640 444C648 466 660 470 668 460C688 428 716 398 740 392C748 389 754 396 754 412C762 452 776 498 787 552C800 622 784 692 728 732C668 778 574 786 507 786Z'
-const AMBER =
- 'M508 770C446 772 370 760 322 722C282 692 276 642 290 590C300 546 310 498 328 464C338 446 352 446 360 462C376 424 398 372 416 342C430 318 452 314 466 338C478 360 482 398 490 426C502 406 516 386 536 382C558 378 574 396 584 426C598 468 616 514 642 550C664 580 674 630 658 674C634 720 574 770 508 770Z'
-const CREAM =
- 'M507 772C452 772 402 744 382 694C364 654 368 606 390 570C402 548 412 510 418 474C424 450 438 442 452 450C466 458 472 482 478 504C483 516 494 520 505 517C517 514 524 504 530 488C540 468 556 464 570 476C584 488 590 518 606 550C630 594 632 646 612 686C590 730 552 772 507 772Z'
+import flame from '../assets/flame.png'
/**
- * Brand flame mark. Shared between the launch splash (large) and the sidebar
- * (small). `live` gives the mark an all-but-imperceptible idle flicker on its
- * bright core; the flicker phase is randomized once per mount so a row of flames
- * never metronomes. All motion is gated by motionEnabled().
+ * Brand flame mark: the exact approved icon art (app/build/icon.png minus the
+ * squircle), so the splash, sidebar, About dialog and dock icon are literally
+ * one image. `live` gives the mark an all-but-imperceptible idle flicker; the
+ * phase is randomized once per mount so a row of flames never metronomes. All
+ * motion is gated by motionEnabled().
*/
export function FlameMark({ size = 20, live = false }: { size?: number; live?: boolean }) {
// Random negative delay so the loop starts mid-cycle at a different point each
@@ -28,15 +17,15 @@ export function FlameMark({ size = 20, live = false }: { size?: number; live?: b
const flicker = live && motionEnabled()
return (
-
+
)
}
diff --git a/app/renderer/components/Sidebar.test.tsx b/app/renderer/components/Sidebar.test.tsx
index a5d2b73..853c239 100644
--- a/app/renderer/components/Sidebar.test.tsx
+++ b/app/renderer/components/Sidebar.test.tsx
@@ -30,7 +30,7 @@ describe('Sidebar', () => {
it('renders the brand flame mark, static under the closed motion gate', () => {
const { container } = render( {}} />)
const flame = container.querySelector('.app .flamemark')
- expect(flame?.tagName.toLowerCase()).toBe('svg')
+ expect(flame?.tagName.toLowerCase()).toBe('img')
// motionEnabled() is off under vitest, so the idle flicker never attaches.
expect(container.querySelector('.fm-flicker')).toBeNull()
})