brand-logos

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVGL Brand Logo

SVGL品牌Logo

SVGL is a library of brand/product/tool logos served as clean, optimized SVGs. It exposes a free, unauthenticated REST API at

https://api.svgl.app

and a shadcn-compatible registry for installing logos as React components. Use it instead of hand-writing logo SVGs or pulling random files off the web, since the markup is consistent and maintained.

SVGL是一个提供高清、优化版SVG格式品牌/产品/工具Logo的资源库。它提供了一个免费无需认证的REST API，地址为

https://api.svgl.app

，同时还有一个兼容shadcn的注册表，可将Logo安装为React组件。由于其标记格式统一且持续维护，建议使用该工具替代手动编写Logo SVG代码或从网络随意获取文件。

When to use this skill

何时使用该工具

Trigger on any request to find, download, add, embed, or install a brand, product, company, or tool logo, even when the user does not name SVGL. Common phrasings: "add the X logo", "I need an SVG icon for X", "put a row of integration logos here", "get the dark-mode version of the Y logo", "install the Z logo as a component".

This skill is for known brand/product logos. It is not for generic UI icons (use an icon set like Lucide/Heroicons), illustrations, or a company's own custom logo that wouldn't be in a public library.

当用户提出查找、下载、添加、嵌入或安装品牌、产品、公司或工具Logo的需求时，即使未提及SVGL，也可触发使用该工具。常见表述包括："添加X的Logo"、"我需要X的SVG图标"、"在这里添加一行集成Logo"、"获取Y的深色模式版本Logo"、"将Z的Logo安装为组件"。

该工具仅适用于已知品牌/产品的Logo。请勿将其用于通用UI图标（应使用Lucide/Heroicons等图标库）、插图，或公司专属的自定义Logo（此类Logo不会出现在公共资源库中）。

Choosing the approach

选择合适的使用方式

Decide between the two workflows based on what the user is building:

REST API (download the raw SVG) — the default. Use when the user wants an
```
.svg
```
file on disk, inline SVG markup, or a logo for a non-React stack (plain HTML, Vue, Svelte, Astro, email, design files). Also use it for quick lookups and "does SVGL have X?" questions.
shadcn registry (install as a React component) — use only when the project already uses React + shadcn (there's a
```
components.json
```
) and the user wants a reusable component rather than a static file. When unsure which the project uses, check for
```
components.json
```
and the framework before assuming. A request for "the SVGL CLI" means this flow (SVGL has no CLI of its own — it's the shadcn CLI against SVGL's registry).

根据用户的开发场景，从以下两种工作流中选择：

REST API（下载原始SVG） —— 默认方式。当用户需要磁盘上的
```
.svg
```
文件、内联SVG标记，或为非React技术栈（纯HTML、Vue、Svelte、Astro、邮件、设计文件）提供Logo时使用。也可用于快速查询以及“SVGL是否有X的Logo？”这类问题。
shadcn注册表（安装为React组件） —— 仅当项目已使用React + shadcn（存在
```
components.json
```
文件），且用户需要可复用组件而非静态文件时使用。若不确定项目使用的技术栈，先检查是否存在
```
components.json
```
及框架信息再做判断。当用户请求“SVGL CLI”时，即指此工作流（SVGL本身没有独立CLI，是通过shadcn CLI调用SVGL的注册表）。

REST API workflow

REST API工作流

Base URL:

https://api.svgl.app

. All responses are JSON except the raw SVG endpoint.

Each logo entry looks like this (note that

route

and

wordmark

may be either a single URL string or a

{ light, dark }

object, and

category

may be a string or array):

json

{
  "id": 573,
  "title": "GitHub",
  "category": "Software",
  "route": {
    "light": "https://svgl.app/library/github_light.svg",
    "dark": "https://svgl.app/library/github_dark.svg"
  },
  "wordmark": {
    "light": "https://svgl.app/library/github_wordmark_light.svg",
    "dark": "https://svgl.app/library/github_wordmark_dark.svg"
  },
  "url": "https://github.com/",
  "brandUrl": "https://brand.github.com/"
}

基础URL：

https://api.svgl.app

。除原始SVG端点外，所有响应均为JSON格式。

每个Logo条目结构如下（注意

route

和

wordmark

可能是单个URL字符串或

{ light, dark }

对象，

category

可能是字符串或数组）：

json

{
  "id": 573,
  "title": "GitHub",
  "category": "Software",
  "route": {
    "light": "https://svgl.app/library/github_light.svg",
    "dark": "https://svgl.app/library/github_dark.svg"
  },
  "wordmark": {
    "light": "https://svgl.app/library/github_wordmark_light.svg",
    "dark": "https://svgl.app/library/github_wordmark_dark.svg"
  },
  "url": "https://github.com/",
  "brandUrl": "https://brand.github.com/"
}

Endpoints

端点说明

Goal	Request
Search by title	`GET https://api.svgl.app?search=<query>`
List a category	`GET https://api.svgl.app/category/<category>` (e.g. `software` )
Discover categories	`GET https://api.svgl.app/categories`
All logos (optionally capped)	`GET https://api.svgl.app?limit=<n>`
Optimized SVG markup	`GET https://api.svgl.app/svg/<name>.svg`
Unoptimized SVG markup	`GET https://api.svgl.app/svg/<name>.svg?no-optimize`

The

<name>

for the

/svg/

endpoint is the filename from a

route

URL without the path/extension prefix — e.g. the route

https://svgl.app/library/github_light.svg

maps to

/svg/github_light.svg

. The optimized version (run through svgo) is almost always what you want; only reach for

?no-optimize

if the user needs the original markup (e.g. to diff against a source file or preserve specific structure).

目标	请求方式
按标题搜索	`GET https://api.svgl.app?search=<query>`
列出分类下的Logo	`GET https://api.svgl.app/category/<category>` （例如 `software` ）
查看所有分类	`GET https://api.svgl.app/categories`
获取所有Logo（可限制数量）	`GET https://api.svgl.app?limit=<n>`
获取优化后的SVG标记	`GET https://api.svgl.app/svg/<name>.svg`
获取未优化的SVG标记	`GET https://api.svgl.app/svg/<name>.svg?no-optimize`

/svg/

端点中的

<name>

是

route

URL中去掉路径和扩展名前缀后的文件名——例如

https://svgl.app/library/github_light.svg

对应

/svg/github_light.svg

。优化版本（经svgo处理）几乎适用于所有场景；仅当用户需要原始标记（例如与源文件对比或保留特定结构）时，才使用

?no-optimize

参数。

Steps

操作步骤

Search by the brand name:
```
curl -s "https://api.svgl.app?search=stripe"
```
. If nothing returns, try a shorter or alternate spelling, or list the likely category to browse.
Pick the right variant from the result:
- If
```
route
```
  is a plain string, there's one universal logo — use it.
- If
```
route
```
  is
```
{ light, dark }
```
  , choose based on where it will render:
```
dark
```
  variants are designed to sit on dark backgrounds (light artwork),
```
light
```
  variants on light backgrounds. When the app supports both themes, grab both and switch with CSS. Don't assume — match the destination background.
- Use
```
wordmark
```
  only when the user explicitly wants the logo with the company name (the wordmark/lockup) rather than the icon mark. If the user says "logo" generically, prefer
```
route
```
  (the icon mark).
Download the chosen SVG into the project's existing asset location rather than inventing a new folder. Look for where other logos/icons already live (e.g.
```
public/
```
,
```
public/logos/
```
,
```
src/assets/
```
,
```
app/assets/icons/
```
,
```
static/
```
) and match that convention and naming style.
Confirm what you saved and where, and mention if both light/dark files were stored.

Example — download the GitHub icon (light + dark) into an existing assets dir:

bash

curl -s -o public/logos/github-light.svg "https://api.svgl.app/svg/github_light.svg"
curl -s -o public/logos/github-dark.svg  "https://api.svgl.app/svg/github_dark.svg"

If the user wants it inline (e.g. to paste into a component), fetch the markup and embed it directly rather than saving a file:

bash

curl -s "https://api.svgl.app/svg/stripe.svg"

搜索品牌名称：
```
curl -s "https://api.svgl.app?search=stripe"
```
。若未返回结果，尝试更短或替代拼写，或列出可能的分类进行浏览。
选择合适的变体：
- 若
```
route
```
  是普通字符串，则只有一个通用Logo，直接使用即可。
- 若
```
route
```
  是
```
{ light, dark }
```
  对象，根据渲染场景选择：
```
dark
```
  变体适用于深色背景（亮色图案），
```
light
```
  变体适用于浅色背景。若应用支持双主题，需同时获取两个变体并通过CSS切换。请勿主观假设，务必匹配目标背景。
- 仅当用户明确需要带公司名称的Logo（文字标志/组合标志）时，才使用
```
wordmark
```
  。若用户仅笼统提及“Logo”，优先选择
```
route
```
  （图标标志）。
下载选中的SVG至项目已有的资源目录，不要新建文件夹。查找其他Logo/图标的存放位置（例如
```
public/
```
、
```
public/logos/
```
、
```
src/assets/
```
、
```
app/assets/icons/
```
、
```
static/
```
），遵循相同的命名规范和目录结构。
确认保存的内容及位置，并说明是否同时存储了亮色/暗色文件。

示例——将GitHub图标（亮色+暗色）下载至已有的资源目录：

bash

curl -s -o public/logos/github-light.svg "https://api.svgl.app/svg/github_light.svg"
curl -s -o public/logos/github-dark.svg  "https://api.svgl.app/svg/github_dark.svg"

若用户需要内联使用（例如粘贴到组件中），直接获取标记并嵌入即可，无需保存文件：

bash

curl -s "https://api.svgl.app/svg/stripe.svg"

shadcn registry workflow

shadcn注册表工作流

SVGL has no standalone CLI of its own. When a user asks for "the SVGL CLI", "svgl cli", or "install via the SVGL CLI", they mean this flow — the shadcn registry, driven by the standard

shadcn

CLI pointed at SVGL's registry. Don't go looking for a separate

svgl

command; route these requests here.

For React projects already on shadcn, logos can be installed as typed components. Just run the install command, using the project's existing package manager (check for

pnpm-lock.yaml

package-lock.json

yarn.lock

, or

bun.lockb

and match it — don't introduce a new one):

bash

pnpm dlx shadcn@latest add @svgl/github

SVGL没有独立的CLI。当用户请求“SVGL CLI”、“svgl cli”或“通过SVGL CLI安装”时，即指此工作流——通过标准

shadcn

CLI调用SVGL的注册表。无需寻找单独的

svgl

命令，直接按此流程处理。

对于已使用shadcn的React项目，可将Logo安装为带类型定义的组件。只需运行安装命令，使用项目已有的包管理器（检查是否存在

pnpm-lock.yaml

、

package-lock.json

、

yarn.lock

或

bun.lockb

，匹配使用即可，不要引入新的包管理器）：

bash

pnpm dlx shadcn@latest add @svgl/github

npm: npx shadcn@latest add @svgl/github

yarn: yarn dlx shadcn@latest add @svgl/github

bun: bunx shadcn@latest add @svgl/github


The `@svgl/...` namespace resolves out of the box — current `shadcn` versions know how to fetch from `https://svgl.app/r/<name>.json` without any project config. This generates React components (e.g. a `GithubLight` component) that accept standard `SVGProps`, so the user can size and style them like any other component. The component name maps to the same logo names used by the API.

**Fallback:** only if the CLI can't resolve the `@svgl` namespace (e.g. an older shadcn version), register it explicitly in `components.json` and re-run:

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


`@svgl/...`命名空间可直接解析——当前版本的`shadcn`无需任何项目配置，即可从`https://svgl.app/r/<name>.json`获取资源。此命令会生成React组件（例如`GithubLight`组件），该组件支持标准`SVGProps`，用户可像操作其他组件一样调整其尺寸和样式。组件名称与API使用的Logo名称一致。

**回退方案：** 若CLI无法解析`@svgl`命名空间（例如shadcn版本较旧），需在`components.json`中显式注册后重新运行命令：

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

Cautions

注意事项

Rate limits. The API is open and unauthenticated but rate-limited to prevent abuse. Don't loop over hundreds of logos or poll it; search once, fetch the specific SVGs you need, and cache the files locally instead of re-downloading.
Brand usage rights. SVGL distributes logos for convenience, but trademark and brand-guideline rules still apply. Follow the brand owner's guidelines (the entry's
```
brandUrl
```
/
```
url
```
often points to them) — don't recolor, distort, or imply an endorsement/partnership the user doesn't have.
Don't clone SVGL. Per SVGL's own terms, the API is meant for extensions, plugins, and tools that help the community — not for scraping its catalog to rebuild a competing logo library.

速率限制：API开放且无需认证，但存在速率限制以防止滥用。请勿循环获取数百个Logo或频繁轮询；只需搜索一次，获取所需的特定SVG，并将文件本地缓存，避免重复下载。
品牌使用权限：SVGL仅为方便用户提供Logo，但商标和品牌指南规则仍然适用。需遵循品牌所有者的指南（条目内的
```
brandUrl
```
/
```
url
```
通常指向相关指南）——不得重新着色、变形Logo，或暗示用户未获得的背书/合作关系。
请勿克隆SVGL：根据SVGL的条款，API仅用于扩展、插件及帮助社区的工具——不得抓取其目录以重建竞争型Logo资源库。

Output

输出说明

After fetching or installing, tell the user concisely:

Which logo(s) and variant(s) you used (icon vs wordmark, light/dark).
Where files were saved or which component(s) were installed.
Any follow-up they should handle themselves (theme switching wiring, brand-guideline review for prominent/marketing use).

获取或安装完成后，向用户简洁说明：

使用了哪些Logo及变体（图标标志/文字标志、亮色/暗色）。
文件保存位置或安装的组件名称。
用户需自行处理的后续事项（如主题切换配置、用于显眼/营销场景时的品牌指南审核）。