React Integration

There are three ways to use Quikturn logos in React — choose the one that fits your project:

Option 1: React SDK (Recommended)

The official React SDK provides drop-in components with built-in error handling, loading states, and retries.

npm install @quikturn/logos-react

QuikturnLogo

import { QuikturnProvider, QuikturnLogo } from "@quikturn/logos-react";

function App() {
  return (
    <QuikturnProvider token="pk_live_xxx">
      <QuikturnLogo domain="stripe.com" size={128} />
      <QuikturnLogo domain="nike.com" size={64} theme="dark" />
    </QuikturnProvider>
  );
}

QuikturnLogoCarousel

import { QuikturnProvider, QuikturnLogoCarousel } from "@quikturn/logos-react";

<QuikturnProvider token="pk_live_xxx">
  <QuikturnLogoCarousel
    domains={["apple.com", "google.com", "stripe.com", "github.com"]}
    size={80}
    speed={30}
  />
</QuikturnProvider>

QuikturnLogoGrid

import { QuikturnProvider, QuikturnLogoGrid } from "@quikturn/logos-react";

<QuikturnProvider token="pk_live_xxx">
  <QuikturnLogoGrid
    domains={["apple.com", "google.com", "stripe.com", "github.com"]}
    columns={4}
    size={64}
  />
</QuikturnProvider>

useLogoUrl Hook

import { QuikturnProvider, useLogoUrl } from "@quikturn/logos-react";

function CustomLogo({ domain }: { domain: string }) {
  const url = useLogoUrl(domain, { size: 128 });
  return <img src={url} alt={`${domain} logo`} />;
}

Full React SDK documentation →

Option 2: REST API (Direct Embed)

Use your publishable key directly—no SDK or API route required.

function CompanyLogo({ domain, size = 64, theme }) {
  const token = process.env.NEXT_PUBLIC_QUIKTURN_PUBLISHABLE_KEY;
  const params = new URLSearchParams({ token, size: String(size) });
  if (theme) params.set('theme', theme);

  return (
    <img
      src={`https://logos.getquikturn.io/${domain}?${params.toString()}`}
      alt={`${domain} logo`}
      loading="lazy"
    />
  );
}

Usage:

<CompanyLogo domain="stripe.com" size={128} />
<CompanyLogo domain="nike.com" theme="dark" />

Optional tweaks: add &greyscale=true when you want desaturated logos.

Option 3: Browser SDK

For more control over caching, retries, and error handling without the React components:

npm install @quikturn/logos

import { QuikturnLogos } from "@quikturn/logos/client";
import { useEffect, useState } from "react";

const client = new QuikturnLogos({ token: "pk_live_xxx" });

function Logo({ domain }: { domain: string }) {
  const [src, setSrc] = useState<string>();

  useEffect(() => {
    client.get(domain, { size: 128 }).then(({ url }) => setSrc(url));
  }, [domain]);

  return src ? <img src={src} alt={`${domain} logo`} /> : null;
}

Full Browser SDK documentation →