A logo before you have one | Once UI Handbook

3 min · Design tip · Logo

From @once-ui-system/core 2.7.0, an app with no logo yet gets a clean mark from its name, and a product with a real SVG logo gets a loading splash drawn from it.

The placeholder logo problem

Most new apps don't have a logo yet. So someone, often an AI agent, draws a quick SVG icon or a fake wordmark to fill the header, and nobody ever replaces it. It is the first thing people see and it looks like a placeholder, because it is one. Once UI 2.7.0 adds two things for this. monogram on Logo gives you a decent mark before you have a designed one, and LogoLoader turns the logo you do have into a loading splash.

A mark from the name

Pass monogram next to text and Logo draws a plain solid shape before the name.

import { Logo } from "@once-ui-system/core";

<Logo text="Acme" monogram href="/" />

The shape is one of five geometric marks, picked from a hash of text, so the same name always gets the same mark. It is filled with the strongest neutral text colour, so it is black in light mode and white in dark mode, with no tile behind it and no brand colour. That is on purpose: it reads like a favicon, not like a logo someone tried to design. If you'd rather show letters, pass a string. One or two characters read best.

<Logo text="Acme" monogram="A" href="/" />

A few rules worth knowing:

icon wins. Once you have a real icon file, set icon and monogram is ignored, so you can leave it in place while you wait for the design.
Beside text, the mark is decorative. It is hidden from screen readers, because the text already names the logo.
It is inline SVG. It renders on the server and adds no dependencies.

If you use an AI agent with Once UI, the agent docs now tell it to reach for monogram and never to draw its own icon or wordmark SVG.

A splash from your real logo

When you do have a logo, LogoLoader draws it as a loading state. Each letter and shape of the SVG is traced in turn, then the logo fills in and holds.

"use client";

import { useState } from "react";
import { LogoLoader } from "@once-ui-system/core";

export function Splash() {
  const [introDone, setIntroDone] = useState(false);

  return (
    <LogoLoader
      src="/trademarks/wordmark.svg"
      height={120}
      settled={introDone}
      onComplete={() => setIntroDone(true)}
    />
  );
}

Pass the file as a URL with src, which is fetched on the client, or as markup with svg to skip the request. Only the geometry is read from the file, so scripts, handlers and styles in the SVG never reach the page.

Prop	What it does
color	neutral by default, or brand, accent, inherit
order
	Shows the filled logo with no intro
	Fires once the intro has played

Because the logo is drawn in one colour, one file covers both themes. Use order="document" for a logo whose file lists the symbol last, so it lands after the letters. Set settled after the first play, as in the example. That way a remount, or a load that runs long, shows the finished logo instead of starting the strokes again. With reduced motion turned on, the tracing is skipped and the logo simply fades in. Keep LogoLoader for page and app splashes. LogoSpinner is still the looping Once UI mark, and Spinner is still the one for buttons and fields. More design tips live in this section.