Explore  ✦  Request logo  ✦  Submit logo  ✦  Extensions  ✦  API  ✦  Contributing

📦 Extensions

A list of extensions that use the svgl API, created by the community:

	Extension	Description	Created by	Link
	SVGL CLI	A CLI for easily adding SVG icons to your project.	sujjeee	GitHub Repository
	SVGL for React	An open-source NPM package that offers a SVGL Logos for React.	ridemountainpig	GitHub Repository
	SVGL for Figma	Add svgs from svgl to your Figma project.	quilljou	Figma Plugin
	SVGL for PowerToys	Search & copy SVG logos in PowerToys Run.	SameerJS6	Website
	SVGL for Raycast	Search SVG logos via svgl.	1weiho	Raycast Store
	SVGL for VSCode	SVGL directly in your VSCode.	girlazote	VSCode Marketplace
	SVGL Badge	A beautiful badges with svgl SVG logos.	ridemountainpig	Website
	Magic	AI extension for Cursor & other IDEs	serafimcloud	Website

🛠️ Stack

• Sveltekit - Web development, streamlined.
• Typescript - JavaScript with syntax for types.
• mdsvex - Markdown for Svelte apps.
• Shiki - A beautiful Syntax Highlighter.
• Tailwindcss - A utility-first CSS framework for rapidly building custom designs.
• bits-ui - A collection of headless components for Svelte.
• clsx + tailwind-merge inspired by shadcn/ui - A tiny utility for constructing className strings conditionally.
• Prettier + prettier-plugin-tailwindcss - An opinionated code formatter.
• Lucide Icons + phosphor-svelte - A clean and friendly icons libraries.
• svelte-sonner - An opinionated toast component for Svelte.
• @svgr/core - Node.js utility to transform SVGs into React components.
• @upstash/redis + @upstash/ratelimit - Serverless Redis for developers.
• Vitest - Blazing Fast Unit Test Framework.

🚀 Getting Started

Important

Before submitting the SVG, make sure that you have permission or that the license of the SVG allows you to add it to svgl. If you are not sure, please contact the company or author.

You will need:

• Node.js 18+ (recommended 20 LTS).
• Git.

1. Fork this repository and clone it locally:

git clone git@github.com:your_username/svgl.git

2. Install dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install

3. Go to the static/library folder and add your .svg logo.

Warning

• Remember to optimize SVG for web, you can use SVGOMG.
• When you optimize the SVG, make sure that the viewBox is not removed.
• The size limit for each .svg is 21kb.

4. Go to the src/data/svgs.ts and add the information about your logo, following the structure:

• Simple logo:

{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "url": "Website"
}

• Logo + wordmark version:

{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "wordmark": "/library/your_logo_wordmark.svg",
  "url": "Website"
}

• Logo + wordmark & light + dark mode:

{
  "title": "Title",
  "category": "Category",
  "route": {
    "light": "/library/your_logo_light.svg",
    "dark": "/library/your_logo_dark.svg"
  },
  "wordmark": {
    "light": "/library/your_wordmark-logo_light.svg",
    "dark": "/library/your_wordmark-logo_dark.svg"
  },
  "url": "Website"
}

• Add brand guidelines:

{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "wordmark": "/library/your_logo_wordmark.svg",
  "brandUrl": "https://assets.website.com/brand-guidelines",
  "url": "Website"
}

Note

• The list of categories is here: src/types/categories.ts. You can add a new category if you need it.
• You can add multiple categories to the same logo, for example: "category": ["Social", "Design"].

And create a pull request with your logo 🚀.

5. (Optional) If you want to run the API locally, you will need to create a .dev.vars file in the /api-routes folder with the following variables:

• Create a Upstash account.
• Create a Upstash Redis Database.

SVGL_API_REQUESTS = 1
UPSTASH_REDIS_URL = ""
UPSTASH_REDIS_TOKEN = ""

✌️ Contributing

🔑 License

• MIT.