Skip to main content
Logo renders brand logos for popular companies and products including Claude, OpenAI, Linear, Discord, and more. Supports both default and filled variants.

​
Installation

npm install @soft-ui/react

​
Usage

import { Logo } from "@soft-ui/react/logo"

<Logo logo="claude" size={24} />

​
API Reference

​
Props

Logo to display. Supported values:
  • claude - Claude
  • airbnb - Airbnb
  • apple - Apple
  • discord - Discord
  • framer - Framer
  • gemini - Gemini
  • linear - Linear
  • loom - Loom
  • openai - OpenAI
  • replit - Replit
  • twilio - Twilio
  • copilot - GitHub Copilot
  • google - Google
​
variant
'default' | 'filled'
default:"'default'"
Visual style:
  • default: Logo only
  • filled: Logo on colored background with rounded corners
​
size
number
default:"24"
Size of the logo in pixels
​
className
string
Additional CSS classes

​
Examples

​
Different Logos

<div className="flex gap-4">
  <Logo logo="claude" />
  <Logo logo="openai" />
  <Logo logo="linear" />
  <Logo logo="discord" />
</div>

​
Filled Variant

<div className="flex gap-4">
  <Logo logo="claude" variant="filled" />
  <Logo logo="openai" variant="filled" />
  <Logo logo="linear" variant="filled" />
  <Logo logo="discord" variant="filled" />
</div>

​
Different Sizes

<div className="flex items-center gap-4">
  <Logo logo="claude" size={16} />
  <Logo logo="claude" size={24} />
  <Logo logo="claude" size={32} />
  <Logo logo="claude" size={48} />
</div>

​
All Available Logos

import { logos } from "@soft-ui/react/logo"

<div className="grid grid-cols-6 gap-4">
  {logos.map((logo) => (
    <Logo key={logo} logo={logo} size={32} />
  ))}
</div>

​
In a List

const integrations = [
  { logo: "linear", name: "Linear" },
  { logo: "discord", name: "Discord" },
  { logo: "loom", name: "Loom" },
]

<div className="space-y-2">
  {integrations.map(({ logo, name }) => (
    <div key={logo} className="flex items-center gap-3">
      <Logo logo={logo} variant="filled" size={32} />
      <span>{name}</span>
    </div>
  ))}
</div>

​
With Tooltips

import { logoNames } from "@soft-ui/react/logo"

<div className="flex gap-2">
  {["claude", "openai", "gemini"].map((logo) => (
    <div key={logo} title={logoNames[logo]}>
      <Logo logo={logo} variant="filled" />
    </div>
  ))}
</div>

​
Accessing Colors and Names

import { logoColors, logoNames } from "@soft-ui/react/logo"

// Get brand color
const claudeColor = logoColors.claude // "#D97757"

// Get display name
const claudeName = logoNames.claude // "Claude"

Build docs developers (and LLMs) love

Get started for freeTalk to us