SVGL, biblioteka logo SVG z darmowym API

SVGL, biblioteka logo SVG z darmowym API

SVGL to katalog znaków firmowych w formacie SVG, zebranych w jednym miejscu i dostępnych zarówno ze strony, jak i przez otwarte API bez klucza. W chwili pisania katalog liczy 665 pozycji w 41 kategoriach. Kod projektu jest na licencji MIT, ale same logo nie są, i to rozróżnienie jest tu najważniejsze.

Jaki problem to rozwiązuje

Sytuacja, którą zna każdy, kto składał sekcję z technologiami na stronie: potrzebujesz dwunastu logo, a każde leży gdzie indziej. Jedno znajdziesz w materiałach prasowych producenta, drugie tylko jako obrazek rastrowy w wynikach wyszukiwania, trzecie w repozytorium, ale w wersji sprzed przemianowania marki. Efektem jest sekcja, w której połowa znaków jest rozmyta, a jeden pochodzi z 2019 roku.

SVGL zbiera je w jednym katalogu, w spójnym formacie i z wariantami na jasne i ciemne tło. Znaki są wektorowe, więc skalują się bez utraty jakości i ważą mało, a przy tym da się zmienić im kolor przez CSS, czego przy obrazku rastrowym zrobić się nie da.

To jest wygoda, a nie funkcja przełomowa, i uczciwie jest to nazwać. Oszczędzasz godzinę pracy przy jednej stronie. Wartość rośnie dopiero wtedy, gdy robisz to regularnie: przy dokumentacji, w agencji budującej wiele stron albo w katalogu narzędzi, gdzie logo są elementem powtarzalnym.

Prawa do znaków, czyli najważniejsze zastrzeżenie

To sekcja, której brakuje w większości materiałów o tym projekcie, a która ma realne znaczenie prawne.

Licencja MIT obejmuje kod strony i API. Nie obejmuje samych logo, bo znaki firmowe są własnością firm, które je zarejestrowały, i żaden zbiór ich nie uwalnia. Sam projekt częściowo w tym pomaga: przy części wpisów w API dokłada pole brandUrl z odsyłaczem do zasad używania znaku u właściciela. Ma je jednak tylko 158 z 665 pozycji, więc przy pozostałych zasad trzeba szukać u samego producenta.

Praktyczne konsekwencje są dwie. Użycie w kontekście informacyjnym, czyli pokazanie, na jakich technologiach stoi Twój produkt, albo zilustrowanie artykułu, jest zwykle dopuszczalne w ramach uczciwego użycia znaku. Użycie sugerujące związek, którego nie ma, to zupełnie inna sytuacja: sekcja „Zaufali nam" z logo firm, które nie są Twoimi klientami, jest problemem niezależnie od tego, skąd wziąłeś plik.

Reguła, która porządkuje resztę: znak wolno pokazać, żeby powiedzieć prawdę o relacji, a nie żeby ją zasugerować. Jeśli masz wątpliwość, zacznij od pola brandUrl w odpowiedzi API, a gdy go przy danym znaku nie ma, poszukaj zasad marki na stronie właściciela.

Osobno warto pamiętać o modyfikacjach. Zmiana proporcji, dodanie obrysu albo przemalowanie znaku na kolor Twojej marki narusza zasady większości firm, nawet jeśli technicznie plik SVG na to pozwala. Wyjątkiem jest wariant jednobarwny, który wiele firm dopuszcza wprost.

Dostęp przez API

Interfejs jest publiczny i nie wymaga klucza, co odróżnia go od większości podobnych katalogów.

curl https://api.svgl.app

Odpowiedź to tablica wpisów, w których obok tytułu i kategorii znajdziesz adres pliku, a przy części pozycji także adres zasad używania znaku:

{
  "id": 0,
  "title": "Plausible Analytics",
  "category": "Analytics",
  "route": "https://svgl.app/library/plausible.svg",
  "brandUrl": "https://plausible.io/trademark",
  "url": "https://plausible.io/"
}

Pole z wariantami pojawia się tam, gdzie znak ma osobne wersje dla jasnego i ciemnego tła, i wtedy zamiast pojedynczego adresu dostajesz obiekt z dwoma. Kod odczytujący te dane musi obsłużyć oba kształty, bo inaczej wywali się na pierwszym znaku z wariantami.

Warto podejść do tego API z rozsądkiem. Klucza nie wymaga, ale limit liczby żądań już obowiązuje, a dokumentacja wprost prosi o buforowanie odpowiedzi po swojej stronie zamiast pobierania tych samych danych przy każdym wywołaniu. Odpytywanie przy każdym renderowaniu strony jest więc nadużyciem i zarazem złym pomysłem technicznym, bo uzależnia Twoją stronę od cudzej dostępności. Pobierz potrzebne pliki raz i trzymaj je u siebie, a API traktuj jako narzędzie do zbudowania tego zestawu, nie jako źródło w czasie działania.

Status projektu

Repozytorium pheralb/svgl ma ponad sześć tysięcy gwiazdek, licencję MIT i jest napisane w TypeScripcie na SvelteKicie. Ostatnie zmiany pochodzą z lipca 2026 roku, więc projekt jest utrzymywany.

Warto jednak mieć świadomość, jak takie katalogi działają. Rozwija je zwykle wąska grupa osób, a nowe znaki dodają zgłoszenia od społeczności. Oznacza to, że aktualność bywa nierówna: popularne technologie mają bieżące wersje znaków, a mniej znane potrafią zostać z logo sprzed przemianowania. Zanim wstawisz znak na stronę klienta, rzuć okiem na stronę producenta i porównaj.

Z tego wynika też praktyczna uwaga dotycząca zależności. Projekt utrzymywany przez wąską grupę może zmienić adres API, zacieśnić limit żądań albo po prostu zwolnić tempo, i nie będzie to niczyją winą. Jeśli budujesz na tym coś, co ma działać przez lata, potraktuj katalog jako źródło jednorazowego pobrania, a nie jako element architektury. Pliki w Twoim repozytorium będą działać niezależnie od tego, co stanie się z projektem, a ich odświeżenie raz na jakiś czas to kwestia jednego skryptu.

Kategorie logo

Technologie i frameworki

Platformy i usługi

Inne

Jak używać SVGL

Metoda 1: Strona (najprostsza)

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

Metoda 2: API

// Pobierz wszystkie logo
const response = await fetch('https://api.svgl.app')
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:

{
  "id": 40,
  "title": "React",
  "category": "Library",
  "route": {
    "light": "https://svgl.app/library/react_light.svg",
    "dark": "https://svgl.app/library/react_dark.svg"
  },
  "wordmark": {
    "light": "https://svgl.app/library/react_wordmark_light.svg",
    "dark": "https://svgl.app/library/react_wordmark_dark.svg"
  },
  "url": "https://react.dev/"
}

Metoda 3: rejestr shadcn/ui

Od wersji 5 SVGL udostępnia własny rejestr dla shadcn/ui, więc znaki dodaje się tym samym poleceniem co komponenty. Najpierw jednorazowy wpis w components.json:

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

Potem instalacja pojedynczego znaku albo kilku naraz:

npx shadcn@latest add @svgl/sanity

pnpm dlx shadcn@latest add @svgl/sanity @svgl/github @svgl/supabase @svgl/vercel

Dostajesz gotowy komponent w swoim projekcie, a nie odwołanie do cudzego serwera, więc znak działa dalej niezależnie od dostępności katalogu. Ta sama konfiguracja obsługuje serwer MCP shadcn, jeśli wolisz dodawać znaki poleceniem wydanym asystentowi.

Metoda 4: Direct URL

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

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

Praktyczne przykłady

Tech Stack Section

// components/TechStack.tsx
const technologies = [
  { name: "React", url: "https://svgl.app/library/react_light.svg" },
  { name: "Next.js", url: "https://svgl.app/library/nextjs_icon_dark.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

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

const logos = [
  "react_light", "vue", "angular", "svelte", "nextjs_icon_dark",
  "nuxt", "astro-icon-light", "remix_light", "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

// 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_light" },
]

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

// 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

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

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

// Logo po kategorii
GET https://api.svgl.app/category/framework

Response Types

type ThemeOptions = {
  light: string
  dark: string
}

interface SVG {
  id: number
  title: string
  category: string | string[]    // jedna kategoria albo lista kategorii
  route: string | ThemeOptions   // jeden plik albo wariant jasny i ciemny
  url: string                    // oficjalna strona
  wordmark?: string | ThemeOptions
  brandUrl?: string              // zasady używania znaku, tylko przy części wpisów
}

Użycie z fetch

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

export async function getLogosByCategory(category: string) {
  const logos = await getAllLogos()
  return logos.filter(logo =>
    Array.isArray(logo.category)
      ? logo.category.includes(category)
      : 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ć:

1. Fork repozytorium github.com/pheralb/svgl
2. Dodaj SVG do /static/library/
3. Zaktualizuj /src/data/svgs.ts
4. 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:

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

  useEffect(() => {
    fetch('https://api.svgl.app')
      .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

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

Local caching

// 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)
}

Jak wstawiać logo, żeby strona nie zwolniła

Pliki wektorowe są lekkie, ale sposób ich wstawienia potrafi zniweczyć tę zaletę, więc warto znać trzy podejścia i wiedzieć, kiedy które ma sens.

Wstawienie treści pliku bezpośrednio w kodzie strony daje najwięcej: znak da się kolorować przez CSS, reaguje na motyw i nie generuje osobnego żądania sieciowego. Kosztem jest rozmiar dokumentu, bo każdy znak to kilkaset bajtów kodu w środku strony. Przy dwunastu logo w sekcji z technologiami jest to właściwy wybór.

Odwołanie do pliku przez znacznik obrazu jest prostsze i utrzymuje kod strony czystym, ale każdy znak to osobne żądanie, a kolorowanie przez CSS przestaje działać. Przy większej liczbie znaków rozproszonych po całej stronie ten wariant wypada lepiej, zwłaszcza w Next.js, gdzie komponent obrazu zajmie się resztą.

Trzecie podejście, najczęściej pomijane, to zebranie znaków w jeden plik z symbolami i odwoływanie się do nich przez identyfikator. Jedno żądanie obsługuje wtedy wszystkie znaki, a każdy nadal da się kolorować. Przy katalogu narzędzi z setką logo różnica jest wyraźna.

Niezależnie od wariantu warto przepuścić pliki przez optymalizator, co w projekcie na Reakcie sprowadza się do jednego kroku w budowaniu. Znaki eksportowane z programów graficznych noszą metadane, ukryte warstwy i nadmiarową precyzję współrzędnych, przez co potrafią ważyć kilkakrotnie więcej, niż powinny. To samo dotyczy plików z tego katalogu, bo pochodzą z materiałów producentów.

Czym to nie jest i czym zastąpić brakujące elementy

Warto ustawić oczekiwania, bo ten katalog bywa mylony z dwiema innymi kategoriami narzędzi.

To nie jest zestaw ikon interfejsu. Znaki firmowe i ikony to dwie różne rzeczy: pierwsze są własnością konkretnych firm i mają ustalony kształt, drugie to elementy funkcjonalne, które projektuje się spójnie i swobodnie koloruje. Do strzałek, koszyków i ikon menu potrzebujesz zestawu ikon, a nie katalogu znaków.

To nie jest też biblioteka komponentów. Dostajesz pliki, a nie gotowe sekcje z logotypami klientów czy przewijające się paski technologii. Układ i animację składasz sam albo bierzesz gotową sekcję z zestawu takiego jak TailGrids i wstawiasz w nią znaki z tego katalogu.

Nie znajdziesz tu również znaków firm spoza świata technologii. Katalog powstał wokół narzędzi programistycznych i usług chmurowych, więc logo banku, sieci handlowej czy producenta samochodów trzeba szukać w materiałach prasowych samej firmy.

Ostatnia sprawa dotyczy jakości pojedynczych plików. Znaki pochodzą z materiałów producentów i ze zgłoszeń społeczności, więc bywają nierówne: jeden ma czyste ścieżki, drugi zachowane warstwy tekstowe, które w przeglądarce bez odpowiedniego kroju rozjadą się wizualnie. Przy znakach kluczowych dla strony warto otworzyć plik i sprawdzić, czy tekst został zamieniony na kształty.

Typowe błędy

Pierwszy to odpytywanie API przy każdym wyświetleniu strony. Katalog jest darmowy i utrzymywany przez jedną osobę, więc taki ruch jest nadużyciem, a Twoja strona uzależnia się od cudzej dostępności. Pobierz pliki raz i trzymaj u siebie.

Drugi to ignorowanie wariantu na ciemne tło. Znaki w kolorze czarnym znikają na ciemnym motywie, a wiele z nich ma osobną wersję właśnie na taką sytuację. Sprawdzenie obu motywów zajmuje chwilę i wyłapuje problem, którego użytkownik nie zgłosi, tylko po prostu nie zobaczy.

Trzeci to zakładanie jednolitego kształtu odpowiedzi API. Część wpisów ma jeden adres pliku, część obiekt z dwoma wariantami, więc kod czytający zawsze to samo pole wywali się na pierwszym znaku z wariantami.

Czwarty to modyfikowanie znaków. Zmiana proporcji, dodanie cienia albo przemalowanie na kolor własnej marki narusza zasady większości firm. Jeśli znak nie pasuje do układu, zmień układ, a nie znak.

Piąty, najpoważniejszy, to używanie znaków w sposób sugerujący relację, której nie ma. Sekcja z logo firm, które nie są Twoimi klientami ani partnerami, jest problemem prawnym, a nie kwestią estetyki, i żadna licencja pliku tego nie zmienia.

FAQ

Czy mogę używać tych logo komercyjnie?

Kod projektu jest na licencji MIT, ale same znaki nie. Każdy pozostaje własnością firmy, która go zarejestrowała, i podlega jej zasadom. Przy części wpisów w API znajdziesz pole brandUrl z odsyłaczem do tych zasad, ale niesie je mniej niż jedna czwarta pozycji, więc przy reszcie trzeba zajrzeć na stronę właściciela.

Ile logo zawiera katalog?

W chwili pisania 665 pozycji w 41 kategoriach, przy czym liczba rośnie wraz ze zgłoszeniami od społeczności. Bieżącą wartość odczytasz wprost z API, bo zwraca ono całą listę.

Czy API wymaga klucza?

Nie, jest publiczne i darmowe. Właśnie dlatego warto z niego korzystać oszczędnie: do zbudowania własnego zestawu plików, a nie jako źródła odpytywanego przy każdym żądaniu użytkownika.

Czy mogę hostować pliki u siebie?

Tak i jest to zalecane podejście. Pobranie plików do repozytorium usuwa zależność od cudzej infrastruktury i pozwala je zoptymalizować przed wdrożeniem.

Jak dodać brakujące logo?

Przez zgłoszenie zmiany w repozytorium projektu: dodajesz plik, uzupełniasz wpis w danych i wysyłasz propozycję. Zasady współpracy opisano w samym repozytorium.

Kod projektu i zasady zgłaszania znaków znajdziesz w repozytorium SVGL, a pełny katalog na stronie projektu.