v1.5
Buy Pro

Placeholder Logo

Neutral placeholder brand logos for mockups, templates, and social proof sections, in lockup, mark, and badge types with brand or neutral colors.

Description

PlaceholderLogo renders a fictional brand logo: Orbit, Spark, Nexus, Prism, Wellspring, Oasis, Vertex, Sentinel, Atlas, Bloom, or Create UI. Each one comes as a full lockup (mark plus wordmark), a mark on its own, or a round badge, and in brand color or neutral monochrome with a solid or gradient fill. It is the same set as the Placeholder Logos page in the Create UI Figma file.

Reach for it while a design is in progress or when it ships as a template: a sign-in card that needs a logo, a header or sidebar brand slot, a customer logo wall, a testimonial, or an integrations grid. Replace it with the real logo before launch. For real company marks use the brand icons from @create-ui/assets, and for an icon that carries meaning use Featured Icon.

Colors follow the theme on their own: neutral logos flip between black and white with dark mode, and the Create UI logo takes your primary color. There is no light or dark prop to set.

Installation

pnpm dlx @create-ui/cli add placeholder-logo

Usage

import { PlaceholderLogo } from "@/components/ui/placeholder-logo"
<PlaceholderLogo brand="spark" type="lockup" />

Examples

Types

lockup is the mark and the wordmark together, for headers and sign-in cards. mark is the symbol alone, for tight spots like a collapsed sidebar. badge puts the mark on a round tile, for avatars, app icons, and logo walls.

Variants and appearances

variant="brand" uses each logo's own color, and variant="neutral" renders it in monochrome for quiet logo walls. appearance="gradient" adds a vertical gradient to the mark, and on a badge a gradient tile with a soft highlight.

Brands

Every brand works with every type, variant, and appearance. PLACEHOLDER_LOGO_BRANDS lists them, which is handy for logo walls.

Sizes

The logo is drawn at its design size (a 24px tall lockup or mark, a 40px badge) and scales with className: set a height on a lockup and a size on a mark or badge.

Accessibility

The logo renders as role="img" with the brand name as its accessible name, so a standalone logo is announced as "Spark". When the brand name is already written next to it, pass aria-hidden so it is not read twice.

API Reference

Extends React.ComponentProps<"span">, so id, aria-*, and event handlers flow through to the root. It takes no children.

Props

PropTypeDefaultDescription
brand"orbit" "spark" "nexus" "prism" "wellspring" "oasis" "vertex" "sentinel" "atlas" "bloom" "createui""spark"Which fictional brand to draw.
type"lockup" "mark" "badge""lockup"Mark and wordmark, the mark alone, or the mark on a round tile.
variant"brand" "neutral""brand"The brand's own color, or monochrome that follows the theme.
appearance"solid" "gradient""solid"Flat fill, or a vertical gradient on the mark and the badge tile.
classNamestring-Merged on the root. Set a height or size here to scale the logo.

Exports

ExportDescription
PlaceholderLogoThe component.
PLACEHOLDER_LOGO_BRANDSEvery brand name, in display order.

Types

type PlaceholderLogoBrand =
  | "orbit"
  | "spark"
  | "nexus"
  | "prism"
  | "wellspring"
  | "oasis"
  | "vertex"
  | "sentinel"
  | "atlas"
  | "bloom"
  | "createui"
type PlaceholderLogoType = "lockup" | "mark" | "badge"
type PlaceholderLogoVariant = "brand" | "neutral"
type PlaceholderLogoAppearance = "solid" | "gradient"
Password StrengthPopover