Search for a command to run...
The Delphi brand mark, in three lockups — logomark (the epsilon glyph alone), wordmark, and combination. SVG, color via `currentColor`, scale via `size-N`/`h-N`/`w-N` classes.
Forwards every native <svg> attribute (className, aria-label, width, height, etc.).
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "logomark" | "wordmark" | "combination" | "logomark" | Which lockup to render. logomark = epsilon glyph alone (1:1). wordmark = "delphi" word alone. combination = both. |
className | string | undefined | Use size-N for the square logomark; use h-N w-auto for wordmark/combination so the aspect ratio is preserved. |
aria-label | string | undefined | Required when the logo carries meaning. Use aria-hidden instead when the logo sits next to visible "Delphi" text. |
Use logomark (the glyph alone) inside the app once the brand is already established — sidebar
nav, message bubbles, inline mentions. It's the densest read.
Use combination for sign-in screens, marketing pages, and the top-left of any page where "what
is this product" needs to be obvious.
Use wordmark alone when the surrounding context already tells you it's a Delphi product (e.g.
inside an authenticated header that's clearly ours) and you want the word, not the mark.
Color via currentColor — wrap the logo in a text-* token (text-fg-high,
text-brand-accent) so it auto-inverts in dark mode without overrides.
Pair aria-label="Delphi" with decorative logos, or aria-hidden when the logo sits next to
visible "Delphi" text.
Set fixed width + height together — pick one and let the SVG viewBox preserve the aspect
ratio. Stretching the combination lockup ruins the optical balance between the glyph and word.
Color the logo with raw hex or RGB. The brand reads correctly in both modes only when it follows
the currentColor + token chain.
Recreate the logo by composing the glyph and wordmark manually. The horizontal spacing in
combination is hand-tuned in the SVG viewBox — use the variant, don't rebuild it.