CubeIris: A Hexagonal Iris

The Lynxflow brand mark is called CubeIris—a union of square and circle: the outer contour is a hexagon (the 2D projection of a cube), and at its center sits a round pupil. Three diagonal spokes radiate from the pupil outward, resembling iris fibers and a camera aperture alike. The pupil itself is a constant amber dot #f0a028 that never changes, regardless of the background.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
<style>.ln{stroke:#0b0c0e}@media(prefers-color-scheme:dark){.ln{stroke:#f2efe9}}</style>
<g class="ln" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
<path d="M50,10 L85,30 L85,70 L50,90 L15,70 L15,30 Z"/>
<path d="M50,50 L15,30 M50,50 L85,30 M50,50 L50,90"/>
<path d="M50,50 L50,10 M50,50 L85,70 M50,50 L15,70" stroke-width="6"/>
<circle cx="50" cy="50" r="13" stroke-width="6"/>
</g>
<circle cx="50" cy="50" r="5" fill="#f0a028"/>
</svg>

Two stroke weight variants: the 8/6 default (hexagon and primary spokes at 8px, secondary spokes and iris ring at 6px) stays crisp at 16px and is ideal for favicons; the 7/5 fine variant reveals more detail and is suited for large-format display. All assets ship with transparent backgrounds and are available at logo.lynxflow.co.

Adaptive Favicon: One SVG, Two Looks

The most common pain point with brand assets is the favicon: light browser tabs need a light icon, dark tabs need a dark one. The traditional approach packs multiple PNGs into a favicon.ico or declares two <link rel="icon" media="(prefers-color-scheme: dark)"> tags in the HTML. SVG offers a more elegant solution—embed the media query directly inside the SVG:

1
2
3
4

<style>
.ln{stroke:#0b0c0e}
@media(prefers-color-scheme:dark){.ln{stroke:#f2efe9}}
</style>

On a light system, the lines render in ink black #0b0c0e; on a dark system, they flip to warm off-white #f2efe9, while the amber pupil stays constant. One file, two renders—the browser tab color follows automatically. This is far cleaner than maintaining two PNGs and declaring them twice in the HTML.

The Pitfall: You Can’t Demo “Adaptive” on One Page

After launching the asset preview page, a user reported what looked like a bug: the preview featured a split-screen tile with a white left half and a black right half, intended to demonstrate the adaptive favicon under both backgrounds. On the white side, however, almost invisible white lines appeared.

The diagnosis: prefers-color-scheme inside an SVG follows the browser/system theme, not the background color beneath it.

Here’s the breakdown:

• The user’s system is set to a dark theme.
• When the <img src="favicon-86.svg"> in the split-screen tile loads the SVG, the entire image matches the dark media query, so all lines render in off-white.
• The off-white lines on the right black background happen to look correct; on the left white background, they’re invisible and wrong.

This isn’t a bug in the SVG file—it’s fully correct as a tab favicon: the tab background is determined by the browser theme, so the media query and the tab color are always in sync. The mistake was in the preview page’s demo strategy. No single adaptive SVG can color itself differently on a white left side and a black right side simultaneously; it has only one global media query state.

The fix is straightforward: the demo area stops referencing the adaptive file via <img>, and instead inlines the SVG source twice—one copy with the media query stripped and a hard stroke:#0b0c0e (forcing light rendering), the other with a hard stroke:#f2efe9 (forcing dark rendering)—each placed inside an absolutely positioned half-width container to recreate the split-screen effect. The file itself is unchanged; the tab favicon remains adaptive as before.

This nuance has broad applicability: any page that demonstrates prefers-color-scheme assets must force separate color renders—you can’t simply drop the original adaptive file into the layout. A single image’s media query casts only one vote, and it’s cast for the system theme, not for whichever background you’ve placed it on top of.

Asset Inventory

The full list at logo.lynxflow.co—all with transparent backgrounds:

• favicon-86.svg / favicon-75.svg — adaptive, flipping between ink black and warm off-white based on system theme; pupil always amber. For browser tab favicons.
• logo-86-ink / logo-75-ink (.svg/.png) — fixed ink-black lines for light backgrounds: light top bars, light document backgrounds.
• logo-86-warm / logo-75-warm (.svg/.png) — fixed warm off-white lines for dark backgrounds: dark top bars, dark page backgrounds.

Selection logic: use the adaptive variant only when the background is determined by the system (tabs, PWA). Once your page controls the background, pick the matching fixed-color variant and don’t expect a media query to make the call for you.