ブランドロゴのSVG探し、Svglで終わりにしませんか

はじめに

ランディングページに「使用技術」のセクションを作るとき、あるいはドキュメントに連携サービスのロゴを並べたいとき、ロゴ画像はどこから調達していますか。公式サイトのプレスキットを探し、ZIPを解凍し、サイズやフォーマットがバラバラなファイルと格闘する——そんな地味に時間を奪われる作業を、多くの開発者が経験しているはずです。

そんな悩みを一気に解決してくれるのが、今回紹介するSvglです。最適化済みのブランドSVGロゴを、Webからワンクリックで、あるいはAPIやCLI経由でプロジェクトに取り込めるオープンソースのロゴライブラリです。

Svglとは

Svglは、有名企業・サービス・OSSプロジェクトのSVGロゴを集めたライブラリサイトです。SvelteKitとTailwind CSSで構築されており、GitHubで6,000を超えるスターを獲得しています。MITライセンスで公開されているオープンソースプロジェクトです。

主な特徴

最適化済みのSVG - 収録されているロゴはすべて最適化されており、そのままプロダクションで使えます
ダークモード対応 - 多くのロゴがライト用・ダーク用の2バリエーションを持ち、テーマ切り替えにも対応できます
ワードマーク対応 - シンボルだけでなく、ロゴタイプ（文字入りロゴ）も収録されています
無料のREST API - 認証不要でロゴの検索・取得ができるAPIが提供されています
豊富な拡張 - React・Vue・Svelte向けパッケージのほか、Figma・VSCode・Raycastなどの拡張も揃っています

使い方の基本

Webサイトからコピーする

最もシンプルな使い方は、svgl.appでロゴを探してコピーすることです。ロゴにカーソルを合わせると、SVGコードのコピー・ファイルのダウンロード・Reactコンポーネント形式でのコピーなどが選べます。カテゴリ絞り込みや検索もあるので、目的のロゴには数秒でたどり着けます。

APIで取得する

SvglはRESTful APIを無料で公開しています。認証は不要です（濫用防止のレート制限はあります）。

# すべてのSVG情報を取得
curl https://api.svgl.app

# 件数を絞って取得
curl "https://api.svgl.app?limit=10"

# タイトルで検索
curl "https://api.svgl.app?search=react"

# カテゴリで絞り込み
curl https://api.svgl.app/category/software

# カテゴリ一覧を取得
curl https://api.svgl.app/categories

レスポンスは次のような形式のJSONです。

[
  {
    "id": 267,
    "title": "React",
    "category": "Library",
    "route": "https://svgl.app/library/react_dark.svg",
    "url": "https://react.dev/"
  }
]

routeやwordmarkは、ダークモード対応ロゴの場合{ "light": "...", "dark": "..." }というオブジェクトになります。

TypeScriptからAPIを使う

実際にフロントエンドから利用する例を見てみましょう。型を定義しておくと扱いやすくなります。

// svgl.ts
type ThemeRoute = string | { light: string; dark: string };

interface Svgl {
  id: number;
  title: string;
  category: string | string[];
  route: ThemeRoute;
  wordmark?: ThemeRoute;
  url: string;
}

export async function searchLogos(query: string): Promise<Svgl[]> {
  const res = await fetch(
    `https://api.svgl.app?search=${encodeURIComponent(query)}`
  );
  if (!res.ok) {
    throw new Error(`SVGL API error: ${res.status}`);
  }
  return res.json();
}

取得したロゴをテーマに応じて出し分けるReactコンポーネントの例です。

// BrandLogo.tsx
type ThemeRoute = string | { light: string; dark: string };

type Props = {
  route: ThemeRoute;
  title: string;
  isDark: boolean;
  size?: number;
};

export function BrandLogo({ route, title, isDark, size = 40 }: Props) {
  const src = typeof route === "string" ? route : isDark ? route.dark : route.light;
  return <img src={src} alt={`${title} logo`} width={size} height={size} />;
}

なお、公式ドキュメントでは取得結果をキャッシュすることが推奨されています。同じデータを毎回リクエストするのは避け、ビルド時に取得して静的に埋め込むか、アプリ側でキャッシュ層を挟むのが行儀の良い使い方です。

shadcn/ui連携でコンポーネントとして追加する

Svglの近年のアップデートで特に便利なのが、shadcn/uiのregistry対応です。ロゴを.tsxのReactコンポーネントとして、CLIから直接プロジェクトに追加できます。

まずcomponents.jsonにSvglのレジストリを登録します。

{
  "registries": {
    "@svgl": "https://svgl.app/r/{name}.json"
  }
}

あとはshadcn CLIで欲しいロゴを指定するだけです。

npx shadcn@latest add @svgl/github

# 複数まとめて追加もできます
npx shadcn@latest add @svgl/react @svgl/vercel @svgl/supabase

これでロゴがプロジェクト内のコンポーネントとして生成され、外部APIに依存せずにインポートして使えるようになります。実行時のネットワークアクセスが不要になるので、パフォーマンス面でもこの方法がおすすめです。

実践的なユースケース

「使用技術」セクションを作る

shadcn/ui連携で追加したロゴコンポーネントを使えば、ランディングページの定番「Tech Stack」セクションがすぐに作れます。

// TechStack.tsx
import { ReactLogo } from "@/components/svgl/react";
import { VercelLogo } from "@/components/svgl/vercel";
import { SupabaseLogo } from "@/components/svgl/supabase";

const stack = [
  { name: "React", Logo: ReactLogo },
  { name: "Vercel", Logo: VercelLogo },
  { name: "Supabase", Logo: SupabaseLogo },
];

export function TechStack() {
  return (
    <section>
      <h2>使用技術</h2>
      <ul className="flex items-center gap-8">
        {stack.map(({ name, Logo }) => (
          <li key={name} className="flex flex-col items-center gap-2">
            <Logo className="size-10" />
            <span className="text-sm">{name}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}