Adding Company Logos

Overview

Company logos are stored as SVG components in src/components/company-logos.tsx. This guide shows you how to add a new logo with proper accessibility and styling.

Logo Requirements

SVG format - Use SVG for scalability and styling flexibility

Accessible - Include proper title and ARIA attributes

Responsive - Set appropriate width and height

Theme-aware - Support both light and dark modes

Adding a Logo

Open the company-logos.tsx file

Navigate to src/components/company-logos.tsx

code src/components/company-logos.tsx

Add your logo to the companyLogos object

Add a new entry with your company’s logoType as the key:

export const companyLogos: Record<string, React.ReactNode> = {
  // ... existing logos
  yourcompany: (
    <svg
      aria-labelledby="yourcompany-logo-title"
      className="text-zinc-900 dark:text-zinc-100"
      height="30"
      viewBox="0 0 100 100"
      width="30"
      xmlns="http://www.w3.org/2000/svg"
    >
      <title id="yourcompany-logo-title">YourCompany</title>
      <path fill="currentColor" d="..." />
    </svg>
  ),
};

Test your logo

Run the development server and navigate to your company page:

pnpm dev

Visit http://localhost:3000/yourcompany to see your logo.

Logo Template

Use this template when adding a new logo:

src/components/company-logos.tsx

export const companyLogos: Record<string, React.ReactNode> = {
  yourcompany: (
    <svg
      aria-labelledby="yourcompany-logo-title"
      className="text-zinc-900 dark:text-zinc-100"
      height="30"
      viewBox="0 0 [width] [height]"
      width="30"
      xmlns="http://www.w3.org/2000/svg"
    >
      <title id="yourcompany-logo-title">YourCompany</title>
      {/* Your SVG paths here */}
      <path fill="currentColor" d="..." />
    </svg>
  ),
};

Template Attributes

aria-labelledby

string

required

Links the SVG to its title for screen readers

Format: "yourcompany-logo-title"
Must match the id in the <title> element

className

string

required

Tailwind classes for theming

For logos that need theme support: "text-zinc-900 dark:text-zinc-100"
For colored logos: Use specific color classes or omit

height

string

required

Logo height in pixels

Standard: "30"
Adjust if needed for visual balance

width

string

required

Logo width in pixels

Standard: "30"
Can be different from height for aspect ratio

viewBox

string

required

SVG coordinate system

Format: "0 0 [width] [height]"
Use the original SVG’s viewBox values

xmlns

string

required

XML namespace for SVG

Always: "http://www.w3.org/2000/svg"

Real Examples

Let’s look at some real examples from the codebase:

Simple Logo (Vercel)

A simple, theme-aware logo:

src/components/company-logos.tsx

vercel: (
  <svg
    className="text-zinc-900 dark:text-zinc-100"
    height="30"
    preserveAspectRatio="xMidYMid"
    viewBox="0 0 256 222"
    width="30"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>Vercel</title>
    <path d="m128 0 128 221.705H0z" fill="currentColor" />
  </svg>
),

Key features:

Uses fill="currentColor" to inherit text color
Theme-aware with text-zinc-900 dark:text-zinc-100
Simple title without id (acceptable for simple cases)

Colored Logo (Cloudflare)

A logo with specific colors:

src/components/company-logos.tsx

cloudflare: (
  <svg
    className="shrink-0 text-accent-100 transition-colors duration-200 ease-out"
    fill="none"
    height="30"
    id="nav-logo-icon"
    viewBox="0 0 66 30"
    width="66"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>Cloudflare</title>
    <path
      className="transition-colors duration-400 ease-out"
      d="M52.688 13.028c..."
      fill="currentColor"
    />
  </svg>
),

Key features:

Wider aspect ratio (66x30)
Uses specific color classes
Includes transition for smooth color changes

Multi-Color Logo (Mintlify)

A logo with multiple colors and opacity:

src/components/company-logos.tsx

mintlify: (
  <svg
    className="text-zinc-600 dark:text-zinc-400"
    fill="none"
    height="30"
    viewBox="0 0 19 19"
    width="30"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>Mintlify</title>
    <path
      d="M18.367 7.28888V..."
      fill="currentColor"
      opacity="0.6"
    />
    <path
      d="M4.83793 7.193C..."
      fill="currentColor"
    />
  </svg>
),

Key features:

Multiple paths with different opacities
Softer colors for a subtle look
All paths use currentColor for theme support

Logo with Dark Mode Variant (Better Auth)

A logo that changes completely in dark mode:

src/components/company-logos.tsx

betterauth: (
  <svg
    fill="none"
    height="40"
    viewBox="0 0 500 500"
    width="40"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>BetterAuth</title>
    <path className="dark:fill-white" d="M0 0h500v500H0z" fill="black" />
    <path
      className="dark:fill-black"
      d="M69 121h86.988v259H69z..."
      fill="white"
    />
  </svg>
),

Key features:

Different fill colors for light and dark modes
Uses className to switch colors
Inverted colors for contrast

Theme Support

Most logos should support both light and dark themes. There are several approaches:

Approach 1: currentColor (Recommended)

Use currentColor with theme-aware text colors:

<svg className="text-zinc-900 dark:text-zinc-100">
  <path fill="currentColor" d="..." />
</svg>

Pros: Simple, consistent, works with Tailwind’s color system Cons: All paths have the same color

Approach 2: Class-based Colors

Use Tailwind classes directly on paths:

<svg>
  <path className="fill-zinc-900 dark:fill-zinc-100" d="..." />
  <path className="fill-blue-500 dark:fill-blue-400" d="..." />
</svg>

Pros: Different colors for different paths, full control Cons: More verbose, harder to maintain

Approach 3: Opacity Variations

Use opacity with currentColor:

<svg className="text-zinc-900 dark:text-zinc-100">
  <path fill="currentColor" opacity="0.6" d="..." />
  <path fill="currentColor" d="..." />
</svg>

Pros: Creates depth while maintaining theme support Cons: Limited to opacity variations

Approach 4: Specific Colors

Use specific colors that work in both modes:

<svg>
  <path fill="#00B4D8" d="..." />
  <path fill="#0077B6" d="..." />
</svg>

Pros: Brand-accurate colors Cons: May not look good in all themes

Test your logo in both light and dark modes to ensure good contrast and visibility.

Sizing Guidelines

Standard Size

Most logos use a standard 30x30 size:

<svg height="30" width="30" viewBox="0 0 100 100">

Wider Logos

For horizontal logos, increase the width:

<svg height="30" width="60" viewBox="0 0 200 100">

Taller Logos

For vertical logos, increase the height:

<svg height="40" width="30" viewBox="0 0 100 150">

Maintain the original aspect ratio by adjusting both width/height and viewBox proportionally.

Accessibility

Title Element (Required)

Every logo must have a <title> element:

<svg aria-labelledby="yourcompany-logo-title">
  <title id="yourcompany-logo-title">YourCompany</title>
  {/* paths */}
</svg>

The title:

Provides a text description for screen readers
Should be the company name
Must have an id that matches the aria-labelledby attribute

ARIA Attributes

aria-labelledby

string

required

Links the SVG to its title element

aria-labelledby="yourcompany-logo-title"

aria-hidden

boolean

Hides decorative logos from screen readers (use sparingly)

aria-hidden="true"

Only use if the logo is purely decorative and the company name is shown in text nearby.

role

string

Specifies the element role

role="img"

Usually not needed as <svg> has implicit role of img.

Optimizing SVGs

Before adding your logo, optimize it:

Remove unnecessary attributes

Remove:

id attributes (except on title)
class attributes from original SVG
style attributes
XML comments
Unnecessary <g> wrappers

Simplify paths

Use tools like SVGOMG to:

Merge paths where possible
Remove redundant points
Round numbers to reduce file size

Use currentColor

Replace hardcoded colors with currentColor:

// Before
fill="#000000"

// After
fill="currentColor"

Test the result

Make sure the optimized logo still looks correct.

Common Issues

Logo is too small/large

Issue: Logo doesn’t match the size of other logosFix: Adjust the width and height attributes:

// Standard size
<svg height="30" width="30">

// Wider logo
<svg height="30" width="60">

// Taller logo
<svg height="40" width="30">

Logo is clipped or has extra space

Issue: The viewBox doesn’t match the logo’s actual boundsFix: Use the original SVG’s viewBox values or calculate the correct bounds:

// The viewBox defines the coordinate system
// Format: "minX minY width height"
viewBox="0 0 100 100"

Logo doesn't support dark mode

Issue: Logo uses hardcoded colors that don’t work in dark modeFix: Use one of the theme support approaches:

// Option 1: currentColor with theme classes
<svg className="text-zinc-900 dark:text-zinc-100">
  <path fill="currentColor" />
</svg>

// Option 2: Class-based colors
<svg>
  <path className="fill-zinc-900 dark:fill-zinc-100" />
</svg>

Logo is not accessible

Issue: Screen readers can’t identify the logoFix: Add proper title and ARIA attributes:

<svg aria-labelledby="yourcompany-logo-title">
  <title id="yourcompany-logo-title">YourCompany</title>
  {/* paths */}
</svg>

Logo type doesn't match

Issue: The key in companyLogos doesn’t match the logoType in your JSONFix: Make sure they match exactly:

company.json

{
  "logoType": "yourcompany"
}

company-logos.tsx

export const companyLogos: Record<string, React.ReactNode> = {
  yourcompany: (/* ... */),
};

Testing Your Logo

Test in light mode

Check that your logo is visible and looks good in light mode.

Test in dark mode

Switch to dark mode and verify the logo still looks good.

Test at different sizes

Zoom in and out to make sure the logo scales well.

Test with screen reader

Use a screen reader to verify the logo is properly announced.

Best Practices

Use SVG format

SVG scales perfectly and can be styled with CSS

Support dark mode

Make sure your logo works in both light and dark themes

Keep it simple

Remove unnecessary elements and optimize paths

Add accessibility

Always include title and ARIA attributes

Use currentColor

Let the logo inherit text color for consistency

Match the size

Keep logos a consistent size (usually 30x30)

Next Steps

After adding your logo:

Make sure the logoType in your company JSON matches the key in company-logos.tsx
Run pnpm dev and navigate to your company page
Test in both light and dark modes
Test with a screen reader
Submit your Pull Request

Adding Companies

Learn how to create company JSON files

Schema Validation

Understand how validation works

Contributing

Technical Reference

Overview

Logo Requirements

Adding a Logo

Logo Template

Template Attributes

Real Examples

Simple Logo (Vercel)

Colored Logo (Cloudflare)

Multi-Color Logo (Mintlify)

Logo with Dark Mode Variant (Better Auth)

Theme Support

Approach 1: currentColor (Recommended)

Approach 2: Class-based Colors

Approach 3: Opacity Variations

Approach 4: Specific Colors

Sizing Guidelines

Standard Size

Wider Logos

Taller Logos

Accessibility

Title Element (Required)

ARIA Attributes

Optimizing SVGs

Common Issues

Testing Your Logo

Best Practices

Use SVG format

Support dark mode

Keep it simple

Add accessibility

Use currentColor

Match the size

Next Steps

Adding Companies

Schema Validation

Build docs developers (and LLMs) love

Contributing

Technical Reference

​Overview

​Logo Requirements

​Adding a Logo

​Logo Template

​Template Attributes

​Real Examples

​Simple Logo (Vercel)

​Colored Logo (Cloudflare)

​Multi-Color Logo (Mintlify)

​Logo with Dark Mode Variant (Better Auth)

​Theme Support

​Approach 1: currentColor (Recommended)

​Approach 2: Class-based Colors

​Approach 3: Opacity Variations

​Approach 4: Specific Colors

​Sizing Guidelines

​Standard Size

​Wider Logos

​Taller Logos

​Accessibility

​Title Element (Required)

​ARIA Attributes

​Optimizing SVGs

​Common Issues

​Testing Your Logo

​Best Practices

Use SVG format

Support dark mode

Keep it simple

Add accessibility

Use currentColor

Match the size

​Next Steps

Adding Companies

Schema Validation

Build docs developers (and LLMs) love

Overview

Logo Requirements

Adding a Logo

Logo Template

Template Attributes

Real Examples

Simple Logo (Vercel)

Colored Logo (Cloudflare)

Multi-Color Logo (Mintlify)

Logo with Dark Mode Variant (Better Auth)

Theme Support

Approach 1: currentColor (Recommended)

Approach 2: Class-based Colors

Approach 3: Opacity Variations

Approach 4: Specific Colors

Sizing Guidelines

Standard Size

Wider Logos

Taller Logos

Accessibility

Title Element (Required)

ARIA Attributes

Optimizing SVGs

Common Issues

Testing Your Logo

Best Practices

Next Steps