SVGL - Biblioteka Logo SVG dla Deweloperów

Czym jest SVGL?

SVGL (svgl.app) to kuratorska kolekcja 579+ logo SVG popularnych technologii, frameworków, usług i firm. Idealna dla deweloperów i designerów potrzebujących wysokiej jakości logo do landing pages, dokumentacji, portfolio czy prezentacji tech stacku.

Zamiast przeszukiwać internet w poszukiwaniu logo React, Next.js czy Vercel, wchodzisz na SVGL, wyszukujesz i pobierasz - wszystko w jednym miejscu, w spójnej jakości SVG.

Główne cechy

579+ logo - Frameworki, biblioteki, języki, chmury, CMS-y i więcej
40+ kategorii - Od AI po Crypto
Wyszukiwanie i filtrowanie - Szybko znajdź to, czego szukasz
API access - Programatyczny dostęp do logo
Dark/Light mode - Logo dostosowane do motywu
shadcn/ui integration - Gotowe komponenty

Strona

Website: svgl.app

GitHub: github.com/pheralb/svgl

Status: 5000+ GitHub stars | 579+ logo | Aktywny development

Dlaczego SVGL?

Problem z logo

Szukanie logo technologii to frustrujące doświadczenie:

Rozproszenie - Logo są na różnych stronach
Różna jakość - PNG, JPG, różne rozmiary
Brak dark mode - Logo nieczytelne na ciemnym tle
Branding guidelines - Trzeba sprawdzać czy można użyć
Czas - Godziny na zebranie kompletu logo

Rozwiązanie SVGL

SVGL oferuje:

Jedno miejsce - Wszystkie logo technologii
SVG - Skalowalne, lekkie, edytowalne
Light/Dark - Wersje dla obu motywów
API - Programatyczny dostęp
Darmowe - Open-source, użyj w dowolnym projekcie

Kategorie logo

Technologie i frameworki

Kategoria	Ilość	Przykłady
Framework	49	React, Vue, Angular, Svelte
Library	76	Redux, Zustand, Lodash
Language	36	JavaScript, TypeScript, Python, Rust
Database	21	PostgreSQL, MongoDB, Redis
Compiler	9	Webpack, Vite, Babel

Platformy i usługi

Kategoria	Ilość	Przykłady
Google	16	Chrome, Cloud, Firebase
Microsoft	26	Azure, VS Code, GitHub
Vercel	5	Vercel, Next.js, Turbo
Hosting	12	Netlify, Railway, Fly.io
CMS	13	Strapi, Sanity, Contentful

Inne

Kategoria	Ilość	Przykłady
AI	50	OpenAI, Anthropic, Hugging Face
Design	29	Figma, Sketch, Adobe
Crypto	21	Bitcoin, Ethereum, Solana
Social	27	Twitter/X, Discord, LinkedIn
Software	204	Slack, Notion, Zoom

Jak używać SVGL

Metoda 1: Strona (najprostsza)

Wejdź na svgl.app
Wyszukaj lub przeglądaj kategorie
Kliknij na logo
Wybierz format (SVG, PNG, JSX)
Kopiuj lub pobierz

Metoda 2: API

Code

TypeScript

// Pobierz wszystkie logo
const response = await fetch('https://svgl.app/api/svgs')
const logos = await response.json()

// Szukaj konkretnego logo
const react = logos.find(logo => logo.title === 'React')
console.log(react.route) // URL do SVG

API Response:

Code

JSON

{
  "id": 1,
  "title": "React",
  "category": "Library",
  "route": "https://svgl.app/library/react.svg",
  "url": "https://reactjs.org/"
}

Metoda 3: shadcn/ui Component

SVGL oferuje integrację z shadcn/ui:

TScomponents/ui/svgl.tsx

TypeScript

// components/ui/svgl.tsx
import { cn } from "@/lib/utils"

interface SVGLLogoProps {
  name: string
  className?: string
  theme?: "light" | "dark"
}

export function SVGLLogo({ name, className, theme = "light" }: SVGLLogoProps) {
  const src = `https://svgl.app/library/${name.toLowerCase()}.svg`

  return (
    <img
      src={src}
      alt={`${name} logo`}
      className={cn("h-8 w-8", className)}
    />
  )
}

// Użycie
<SVGLLogo name="react" className="h-12 w-12" />
<SVGLLogo name="nextjs" theme="dark" />

Metoda 4: Direct URL

Code

HTML

<!-- Bezpośredni link do SVG -->
<img src="https://svgl.app/library/react.svg" alt="React" />

<!-- W markdown -->
![React](https://svgl.app/library/react.svg)

Praktyczne przykłady

Tech Stack Section

TScomponents/TechStack.tsx

TypeScript

// components/TechStack.tsx
const technologies = [
  { name: "React", url: "https://svgl.app/library/react.svg" },
  { name: "Next.js", url: "https://svgl.app/library/nextjs.svg" },
  { name: "TypeScript", url: "https://svgl.app/library/typescript.svg" },
  { name: "Tailwind", url: "https://svgl.app/library/tailwindcss.svg" },
  { name: "Prisma", url: "https://svgl.app/library/prisma.svg" },
  { name: "Vercel", url: "https://svgl.app/library/vercel.svg" },
]

export function TechStack() {
  return (
    <section className="py-16">
      <h2 className="text-2xl font-bold text-center mb-8">Tech Stack</h2>
      <div className="flex flex-wrap justify-center gap-8">
        {technologies.map((tech) => (
          <div key={tech.name} className="flex flex-col items-center gap-2">
            <img
              src={tech.url}
              alt={tech.name}
              className="h-12 w-12 grayscale hover:grayscale-0 transition-all"
            />
            <span className="text-sm text-gray-600">{tech.name}</span>
          </div>
        ))}
      </div>
    </section>
  )
}

Logos Marquee

TScomponents/LogosMarquee.tsx

TypeScript

// components/LogosMarquee.tsx
import { motion } from "framer-motion"

const logos = [
  "react", "vue", "angular", "svelte", "nextjs",
  "nuxt", "astro", "remix", "gatsby", "qwik"
]

export function LogosMarquee() {
  return (
    <div className="overflow-hidden py-8">
      <motion.div
        className="flex gap-12"
        animate={{ x: [0, -1000] }}
        transition={{
          duration: 20,
          repeat: Infinity,
          ease: "linear"
        }}
      >
        {[...logos, ...logos].map((logo, i) => (
          <img
            key={i}
            src={`https://svgl.app/library/${logo}.svg`}
            alt={logo}
            className="h-8 w-auto opacity-50 hover:opacity-100 transition-opacity"
          />
        ))}
      </motion.div>
    </div>
  )
}

Trusted By Section

TScomponents/TrustedBy.tsx

TypeScript

// components/TrustedBy.tsx
const companies = [
  { name: "Google", logo: "google" },
  { name: "Microsoft", logo: "microsoft" },
  { name: "Vercel", logo: "vercel" },
  { name: "Stripe", logo: "stripe" },
  { name: "GitHub", logo: "github" },
]

export function TrustedBy() {
  return (
    <section className="bg-gray-50 py-12">
      <p className="text-center text-gray-500 mb-8">
        Trusted by leading companies
      </p>
      <div className="flex justify-center items-center gap-12 flex-wrap">
        {companies.map((company) => (
          <img
            key={company.name}
            src={`https://svgl.app/library/${company.logo}.svg`}
            alt={company.name}
            className="h-8 opacity-60 grayscale"
          />
        ))}
      </div>
    </section>
  )
}

Documentation Page

TScomponents/docs/TechBadge.tsx

TypeScript

// components/docs/TechBadge.tsx
interface TechBadgeProps {
  name: string
  version?: string
}

export function TechBadge({ name, version }: TechBadgeProps) {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1 bg-gray-100 rounded-full">
      <img
        src={`https://svgl.app/library/${name.toLowerCase()}.svg`}
        alt={name}
        className="h-4 w-4"
      />
      <span className="text-sm font-medium">{name}</span>
      {version && (
        <span className="text-xs text-gray-500">{version}</span>
      )}
    </div>
  )
}

// Użycie w dokumentacji
<TechBadge name="React" version="18.2" />
<TechBadge name="TypeScript" version="5.0" />

API Reference

Endpoints

Code

TypeScript

// Wszystkie logo
GET https://svgl.app/api/svgs

// Kategorie
GET https://svgl.app/api/categories

// Logo po kategorii
GET https://svgl.app/api/svgs?category=Framework

Response Types

Code

TypeScript

interface SVGLogo {
  id: number
  title: string
  category: string
  route: string           // URL do light mode SVG
  wordmark?: string       // URL do wordmark
  url: string            // Oficjalna strona
}

interface SVGLogoWithTheme extends SVGLogo {
  route: {
    light: string
    dark: string
  }
}

Użycie z fetch

TSlib/svgl.ts

TypeScript

// lib/svgl.ts
export async function getAllLogos() {
  const res = await fetch('https://svgl.app/api/svgs')
  return res.json()
}

export async function getLogosByCategory(category: string) {
  const logos = await getAllLogos()
  return logos.filter(logo => logo.category === category)
}

export async function searchLogos(query: string) {
  const logos = await getAllLogos()
  return logos.filter(logo =>
    logo.title.toLowerCase().includes(query.toLowerCase())
  )
}

Dodawanie logo

Jeśli brakuje logo, możesz je dodać:

Fork repozytorium github.com/pheralb/svgl
Dodaj SVG do /static/library/
Zaktualizuj /src/data/svgs.ts
Stwórz Pull Request

Wymagania dla logo

Format: SVG
Rozmiar: Zoptymalizowany (usuń zbędne atrybuty)
Jakość: Oficjalne logo lub approved fanmade
Licencja: Sprawdź brand guidelines

Tips & tricks

Dark mode logos

Niektóre logo mają wersje dla ciemnego tła:

Code

TypeScript

// Sprawdź czy logo ma dark variant
function LogoWithTheme({ name, theme }) {
  const [logo, setLogo] = useState(null)

  useEffect(() => {
    fetch('https://svgl.app/api/svgs')
      .then(res => res.json())
      .then(logos => {
        const found = logos.find(l => l.title.toLowerCase() === name.toLowerCase())
        setLogo(found)
      })
  }, [name])

  if (!logo) return null

  const src = typeof logo.route === 'object'
    ? logo.route[theme]
    : logo.route

  return <img src={src} alt={name} />
}

Preloading popular logos

Code

TypeScript

// W head dokumentu
<link rel="preload" as="image" href="https://svgl.app/library/react.svg" />
<link rel="preload" as="image" href="https://svgl.app/library/nextjs.svg" />

Local caching

Code

TypeScript

// Pobierz i cache lokalnie
async function downloadLogo(name: string, outputDir: string) {
  const response = await fetch(`https://svgl.app/library/${name}.svg`)
  const svg = await response.text()
  await fs.writeFile(`${outputDir}/${name}.svg`, svg)
}

FAQ - Najczęściej zadawane pytania

Czy mogę używać logo komercyjnie?

SVGL jako biblioteka jest open-source. Jednak każde logo podlega własnym brand guidelines firmy, której logo reprezentuje. Dla użycia komercyjnego sprawdź politykę danej marki.

Czy logo są aktualne?

Społeczność stale aktualizuje logo. Jeśli znajdziesz nieaktualne logo, otwórz issue lub PR na GitHubie.

Jak dodać brakujące logo?

Fork repo, dodaj SVG, zaktualizuj dane i stwórz PR. Sprawdź contributing guidelines.

Czy mogę hostować logo lokalnie?

Tak, możesz pobrać SVG i hostować we własnej infrastrukturze.

Czy API jest darmowe?

Tak, API jest darmowe. Dla dużego ruchu rozważ cache'owanie lub lokalne hostowanie.

Podsumowanie

SVGL to niezbędne narzędzie dla każdego developera i designera:

579+ logo - Frameworki, biblioteki, usługi, firmy
SVG format - Skalowalne i lekkie
Dark/Light - Wersje dla obu motywów
API access - Programatyczny dostęp
Darmowe - Open-source
shadcn/ui - Gotowa integracja

Zamiast tracić czas na szukanie logo - użyj SVGL i skup się na budowaniu.

SVGL - SVG Logo Library for Developers

What is SVGL?

SVGL (svgl.app) is a curated collection of 579+ SVG logos of popular technologies, frameworks, services, and companies. Perfect for developers and designers needing high-quality logos for landing pages, documentation, portfolios, or tech stack presentations.

Instead of scouring the internet looking for React, Next.js, or Vercel logos, you can visit SVGL, search, and download - all in one place, in consistent SVG quality.

Key features

579+ logos - Frameworks, libraries, languages, clouds, CMSs and more
40+ categories - From AI to Crypto
Search and filter - Quickly find what you need
API access - Programmatic access to logos
Dark/Light mode - Logos adapted to theme
shadcn/ui integration - Ready-made components

Website

Website: svgl.app

GitHub: github.com/pheralb/svgl

Status: 5000+ GitHub stars | 579+ logos | Active development

Why SVGL?

The problem with logos

Searching for technology logos is a frustrating experience:

Scattered - Logos are on different websites
Varying quality - PNG, JPG, different sizes
No dark mode - Logos unreadable on dark backgrounds
Branding guidelines - Need to check if you can use them
Time - Hours spent collecting a complete set of logos

The SVGL solution

SVGL offers:

One place - All technology logos
SVG - Scalable, lightweight, editable
Light/Dark - Versions for both themes
API - Programmatic access
Free - Open-source, use in any project

Logo categories

Technologies and frameworks

Category	Count	Examples
Framework	49	React, Vue, Angular, Svelte
Library	76	Redux, Zustand, Lodash
Language	36	JavaScript, TypeScript, Python, Rust
Database	21	PostgreSQL, MongoDB, Redis
Compiler	9	Webpack, Vite, Babel

Platforms and services

Category	Count	Examples
Google	16	Chrome, Cloud, Firebase
Microsoft	26	Azure, VS Code, GitHub
Vercel	5	Vercel, Next.js, Turbo
Hosting	12	Netlify, Railway, Fly.io
CMS	13	Strapi, Sanity, Contentful

Other

Category	Count	Examples
AI	50	OpenAI, Anthropic, Hugging Face
Design	29	Figma, Sketch, Adobe
Crypto	21	Bitcoin, Ethereum, Solana
Social	27	Twitter/X, Discord, LinkedIn
Software	204	Slack, Notion, Zoom

How to use SVGL

Method 1: Website (simplest)

Visit svgl.app
Search or browse categories
Click on a logo
Choose format (SVG, PNG, JSX)
Copy or download

Method 2: API

Code

TypeScript

// Get all logos
const response = await fetch('https://svgl.app/api/svgs')
const logos = await response.json()

// Search for a specific logo
const react = logos.find(logo => logo.title === 'React')
console.log(react.route) // URL to SVG

API Response:

Code

JSON

{
  "id": 1,
  "title": "React",
  "category": "Library",
  "route": "https://svgl.app/library/react.svg",
  "url": "https://reactjs.org/"
}

Method 3: shadcn/ui Component

SVGL offers integration with shadcn/ui:

TScomponents/ui/svgl.tsx

TypeScript

// components/ui/svgl.tsx
import { cn } from "@/lib/utils"

interface SVGLLogoProps {
  name: string
  className?: string
  theme?: "light" | "dark"
}

export function SVGLLogo({ name, className, theme = "light" }: SVGLLogoProps) {
  const src = `https://svgl.app/library/${name.toLowerCase()}.svg`

  return (
    <img
      src={src}
      alt={`${name} logo`}
      className={cn("h-8 w-8", className)}
    />
  )
}

// Usage
<SVGLLogo name="react" className="h-12 w-12" />
<SVGLLogo name="nextjs" theme="dark" />

Method 4: Direct URL

Code

HTML

<!-- Direct link to SVG -->
<img src="https://svgl.app/library/react.svg" alt="React" />

<!-- In markdown -->
![React](https://svgl.app/library/react.svg)

Practical examples

Tech Stack Section

TScomponents/TechStack.tsx

TypeScript

// components/TechStack.tsx
const technologies = [
  { name: "React", url: "https://svgl.app/library/react.svg" },
  { name: "Next.js", url: "https://svgl.app/library/nextjs.svg" },
  { name: "TypeScript", url: "https://svgl.app/library/typescript.svg" },
  { name: "Tailwind", url: "https://svgl.app/library/tailwindcss.svg" },
  { name: "Prisma", url: "https://svgl.app/library/prisma.svg" },
  { name: "Vercel", url: "https://svgl.app/library/vercel.svg" },
]

export function TechStack() {
  return (
    <section className="py-16">
      <h2 className="text-2xl font-bold text-center mb-8">Tech Stack</h2>
      <div className="flex flex-wrap justify-center gap-8">
        {technologies.map((tech) => (
          <div key={tech.name} className="flex flex-col items-center gap-2">
            <img
              src={tech.url}
              alt={tech.name}
              className="h-12 w-12 grayscale hover:grayscale-0 transition-all"
            />
            <span className="text-sm text-gray-600">{tech.name}</span>
          </div>
        ))}
      </div>
    </section>
  )
}

Logos Marquee

TScomponents/LogosMarquee.tsx

TypeScript

// components/LogosMarquee.tsx
import { motion } from "framer-motion"

const logos = [
  "react", "vue", "angular", "svelte", "nextjs",
  "nuxt", "astro", "remix", "gatsby", "qwik"
]

export function LogosMarquee() {
  return (
    <div className="overflow-hidden py-8">
      <motion.div
        className="flex gap-12"
        animate={{ x: [0, -1000] }}
        transition={{
          duration: 20,
          repeat: Infinity,
          ease: "linear"
        }}
      >
        {[...logos, ...logos].map((logo, i) => (
          <img
            key={i}
            src={`https://svgl.app/library/${logo}.svg`}
            alt={logo}
            className="h-8 w-auto opacity-50 hover:opacity-100 transition-opacity"
          />
        ))}
      </motion.div>
    </div>
  )
}

Trusted By Section

TScomponents/TrustedBy.tsx

TypeScript

// components/TrustedBy.tsx
const companies = [
  { name: "Google", logo: "google" },
  { name: "Microsoft", logo: "microsoft" },
  { name: "Vercel", logo: "vercel" },
  { name: "Stripe", logo: "stripe" },
  { name: "GitHub", logo: "github" },
]

export function TrustedBy() {
  return (
    <section className="bg-gray-50 py-12">
      <p className="text-center text-gray-500 mb-8">
        Trusted by leading companies
      </p>
      <div className="flex justify-center items-center gap-12 flex-wrap">
        {companies.map((company) => (
          <img
            key={company.name}
            src={`https://svgl.app/library/${company.logo}.svg`}
            alt={company.name}
            className="h-8 opacity-60 grayscale"
          />
        ))}
      </div>
    </section>
  )
}

Documentation Page

TScomponents/docs/TechBadge.tsx

TypeScript

// components/docs/TechBadge.tsx
interface TechBadgeProps {
  name: string
  version?: string
}

export function TechBadge({ name, version }: TechBadgeProps) {
  return (
    <div className="inline-flex items-center gap-2 px-3 py-1 bg-gray-100 rounded-full">
      <img
        src={`https://svgl.app/library/${name.toLowerCase()}.svg`}
        alt={name}
        className="h-4 w-4"
      />
      <span className="text-sm font-medium">{name}</span>
      {version && (
        <span className="text-xs text-gray-500">{version}</span>
      )}
    </div>
  )
}

// Usage in documentation
<TechBadge name="React" version="18.2" />
<TechBadge name="TypeScript" version="5.0" />

API Reference

Endpoints

Code

TypeScript

// All logos
GET https://svgl.app/api/svgs

// Categories
GET https://svgl.app/api/categories

// Logos by category
GET https://svgl.app/api/svgs?category=Framework

Response Types

Code

TypeScript

interface SVGLogo {
  id: number
  title: string
  category: string
  route: string           // URL to light mode SVG
  wordmark?: string       // URL to wordmark
  url: string            // Official website
}

interface SVGLogoWithTheme extends SVGLogo {
  route: {
    light: string
    dark: string
  }
}

Usage with fetch

TSlib/svgl.ts

TypeScript

// lib/svgl.ts
export async function getAllLogos() {
  const res = await fetch('https://svgl.app/api/svgs')
  return res.json()
}

export async function getLogosByCategory(category: string) {
  const logos = await getAllLogos()
  return logos.filter(logo => logo.category === category)
}

export async function searchLogos(query: string) {
  const logos = await getAllLogos()
  return logos.filter(logo =>
    logo.title.toLowerCase().includes(query.toLowerCase())
  )
}

Adding logos

If a logo is missing, you can add it:

Fork the repository github.com/pheralb/svgl
Add SVG to /static/library/
Update /src/data/svgs.ts
Create a Pull Request

Logo requirements

Format: SVG
Size: Optimized (remove unnecessary attributes)
Quality: Official logo or approved fanmade
License: Check brand guidelines

Tips & tricks

Dark mode logos

Some logos have versions for dark backgrounds:

Code

TypeScript

// Check if logo has dark variant
function LogoWithTheme({ name, theme }) {
  const [logo, setLogo] = useState(null)

  useEffect(() => {
    fetch('https://svgl.app/api/svgs')
      .then(res => res.json())
      .then(logos => {
        const found = logos.find(l => l.title.toLowerCase() === name.toLowerCase())
        setLogo(found)
      })
  }, [name])

  if (!logo) return null

  const src = typeof logo.route === 'object'
    ? logo.route[theme]
    : logo.route

  return <img src={src} alt={name} />
}

Preloading popular logos

Code

TypeScript

// In document head
<link rel="preload" as="image" href="https://svgl.app/library/react.svg" />
<link rel="preload" as="image" href="https://svgl.app/library/nextjs.svg" />

Local caching

Code

TypeScript

// Download and cache locally
async function downloadLogo(name: string, outputDir: string) {
  const response = await fetch(`https://svgl.app/library/${name}.svg`)
  const svg = await response.text()
  await fs.writeFile(`${outputDir}/${name}.svg`, svg)
}

FAQ - Frequently asked questions

Can I use logos commercially?

SVGL as a library is open-source. However, each logo is subject to its own brand guidelines from the company it represents. For commercial use, check the brand policy of each company.

Are the logos up to date?

The community constantly updates logos. If you find an outdated logo, open an issue or PR on GitHub.

How do I add a missing logo?

Fork the repo, add the SVG, update the data, and create a PR. Check the contributing guidelines.

Can I host logos locally?

Yes, you can download SVGs and host them on your own infrastructure.

Is the API free?

Yes, the API is free. For high traffic, consider caching or local hosting.

Summary

SVGL is an essential tool for every developer and designer:

579+ logos - Frameworks, libraries, services, companies
SVG format - Scalable and lightweight
Dark/Light - Versions for both themes
API access - Programmatic access
Free - Open-source
shadcn/ui - Ready integration

Instead of wasting time searching for logos - use SVGL and focus on building.