Logos

The logo collection contains 565 ready-to-use React components. It includes brand marks, wordmarks, flags, payment symbols, and product identities. Use a named import when you know which logo you need, or browse the categories in the sidebar to compare available variants.

Install Honest UI with your preferred package manager:

npm install honestui

Import logos from the dedicated honestui/logos entry point:

import { Vercel, VercelWordmark } from "honestui/logos";

export function ProductCredits() {
  return (
    <div className="flex items-center gap-4">
      <Vercel size={24} aria-label="Vercel" />
      <VercelWordmark className="h-6 w-auto" aria-label="Vercel" />
    </div>
  );
}

Named imports are tree-shakeable, so your application only bundles the logos it uses.

Some identities include more than one component. Variants can include an icon, a horizontal wordmark, light and dark artwork, or a symbol designed for a particular context. The variant is part of the export name, such as VercelWordmark.

Every export also has typed metadata:

import { Vercel, VercelMetadata } from "honestui/logos";

console.log(VercelMetadata.name); // "Vercel"
console.log(VercelMetadata.variant); // "default"

Use allLogos when building a catalog or asset picker. Prefer named imports in product code so you do not include the full collection.

• Adobe contains Adobe and Creative Cloud application identities.
• AI covers AI assistants, model providers, and generative tools.
• Browser includes web browser identities and browser-related products.
• Cards contains card networks, card faces, and financial card symbols.
• CMS covers content management and publishing platforms.
• Crypto includes cryptocurrencies, wallets, and blockchain networks.
• Database contains database engines, hosted data services, and storage products.
• Design covers interface design, prototyping, and creative tools.
• Developer Tools includes developer environments, deployment tools, and engineering services.
• Flags contains country, territory, and regional flags.
• Frameworks covers application and web development frameworks.
• Google contains Google products and platform identities.
• Languages includes programming and markup language marks.
• Libraries covers open-source packages, UI libraries, and development utilities.
• Music contains music and audio service identities.
• Payment includes payment providers and checkout methods.
• Social covers social networks, communities, and messaging platforms.
• Software contains applications, operating systems, and software products.
• Sports contains sports brand identities.
• Stickers contains decorative badges and identity stickers.

Logo components accept standard SVG props plus size and className. Multicolor logos preserve their authored colors. Single-color marks can be styled when their SVG uses currentColor.

Do not assume that every logo is square. For wordmarks, set one dimension and allow the other to remain automatic with classes such as h-6 w-auto.

Use aria-label when a logo communicates the identity of a product or company. Use aria-hidden="true" when nearby text already supplies the same information. Brand assets can have usage restrictions even when the React component code is open source, so follow the brand owner's trademark and identity guidelines.