theSVG: több mint 6500 SVG ikon fejlesztőknek és designereknek

Ha egy weboldalhoz, alkalmazáshoz vagy dokumentációhoz egy ismert szolgáltatás logójára van szükség, könnyű belefutni ugyanabba a problémába: meg kell találni a megfelelő SVG-t, ellenőrizni kell a változatát, majd valahogy be is kell illeszteni a projektbe.

A theSVG ezt a folyamatot próbálja egyszerűbbé tenni. A projekt több ezer márka- és technológiai SVG-ikont gyűjt egy helyre, és nem áll meg a böngészőben történő letöltésnél: npm-csomagok, CDN, CLI, API, fejlesztői bővítmények és AI-eszközökhöz használható MCP-szerver is tartozik hozzá. A projekt GitHub-oldala szerint több mint 6500 ikon érhető el, köztük több mint 4600 márkaikon, valamint AWS-, Azure- és Google Cloud-ikonok. A gyűjteményhez több mint 12 300 SVG-változat tartozik. A számok idővel változhatnak, ezért ezeket a cikkben a jelenlegi állapotként érdemes kezelni.

Mi az a theSVG?

A theSVG egy nyílt forrású, fejlesztőkre és designerekre szabott SVG-ikonkönyvtár. A klasszikus felhasználói felületi ikonok helyett elsősorban márkák, szoftverek, technológiai szolgáltatások és felhőplatformok logóira koncentrál. A gyűjtemény böngészőből kereshető, de az ikonok közvetlen SVG-fájlként is használhatók, illetve többféle fejlesztői csomagon és eszközön keresztül is elérhetők. A projekt egyik érdekes tulajdonsága, hogy nem egyetlen felhasználási módra épít. Ha csak egy logót szeretnénk letölteni, erre is használható, de ugyanúgy beilleszthető egy React-, Vue- vagy Svelte-projektbe, használható CDN-ről, vagy akár parancssorból is.

Több különálló gyűjtemény

A theSVG nem csak márkalogókat tartalmaz. A projekt négy fő gyűjteménybe rendezi az ikonokat:

Gyűjtemény	Ikonok száma	Tartalom
Brand Icons	4629	Márkalogók 140+ kategóriából
AWS Architecture	739	AWS szolgáltatás-, erőforrás-, kategória- és csoportikonok
Azure Services	626	Microsoft Azure szolgáltatásikonok
Google Cloud	214	Google Cloud Platform ikonok

Az AWS Architecture ikonok a hivatalos AWS Architecture Icons csomagból származnak, és a projekt szerint módosítás nélkül, CC BY-ND 2.0 licenc alatt kerülnek terjesztésre.

A gyűjtemény ezért különösen érdekes lehet azoknak, akik technológiai stackeket, cloud architektúrákat vagy szolgáltatásintegrációkat mutatnak be.

Nem csak logók: többféle változat

Egy márkalogó esetében nem mindig ugyanaz a változat használható minden háttéren. A theSVG ezért az ikonokhoz többféle változatot is biztosíthat.

A támogatott változatok:

• Default – az elsődleges márkaszínekkel
• Mono – egyszínű változat, amely a szövegszínhez igazítható
• Light – világos, például sötét háttérhez
• Dark – sötét, például világos háttérhez
• Wordmark – teljes szöveges logó
• Wordmark Light – világos szöveges logó
• Wordmark Dark – sötét szöveges logó

Nem minden ikon rendelkezik minden változattal, a default változat viszont mindig elérhető. Ez praktikus lehet például egy sötét módot is használó weboldalnál, ahol nem szeretnénk ugyanazt a színes logót minden felületen megjeleníteni.

Mire használható a gyakorlatban?

A theSVG leginkább akkor lehet hasznos, amikor egy projektben konkrét technológiákat vagy szolgáltatásokat szeretnénk vizuálisan megjeleníteni.

Például használható:

• technológiai stack bemutatására;
• egy SaaS-szolgáltatás integrációs oldalán;
• dokumentációban;
• fejlesztői portfólióban;
• GitHub-projektekben és README-fájlokban;
• egy alkalmazás által támogatott platformok bemutatására;
• partner- vagy szolgáltatáslistákhoz;
• cloud architektúrák szemléltetésére;
• weboldalak és alkalmazások felületein.

Egy fejlesztői oldal például könnyen megmutathatja vele, hogy egy projekt Reactet, TypeScriptet, PostgreSQL-t, Docker-t vagy valamelyik felhőszolgáltatást használ.

Használat npm-csomagként

Aki nem szeretné az SVG-fájlokat egyenként letöltögetni, npm-csomagként is használhatja a theSVG-et.

Az alapcsomag telepítése:

npm install thesvg

Ezután egy ikon közvetlenül importálható:

import github from "thesvg/github";

github.svg;
github.title;
github.hex;
github.variants;

A projekt külön, tree-shake-elhető csomagot is biztosít:

npm install @thesvg/icons

A tree-shaking ebben az esetben azért érdekes, mert a projekt célja, hogy csak a ténylegesen használt ikon kerüljön be a kliensoldali csomagba, a teljes ikonkönyvtár helyett.

React, Vue és Svelte támogatás

A theSVG nem frameworkfüggő. A projekt külön csomagokat kínál Reacthez, Vue 3-hoz és Svelte-hez.

React esetén például:

import { Github, Figma } from "@thesvg/react";

export function Logos() {
  return <Github width={24} height={24} />;
}

Vue-ban:

<script setup>
import { Github, Figma } from "@thesvg/vue";
</script>

<template>
  <Github width="24" height="24" />
</template>

Svelte esetén pedig:

<script>
import { Github, Figma } from "@thesvg/svelte";
</script>

<Github width={24} />

A csomagok TypeScript-támogatással készülnek, így a projekt nem csak egyszerű SVG-fájlok gyűjteményeként használható, hanem a fejlesztői munkafolyamatba is beépíthető.

Használat CDN-ről

Ha nincs szükség npm-re vagy külön csomagtelepítésre, az ikonok CDN-ről is betölthetők.

Például:

<img
  src="https://thesvg.org/icons/github/default.svg"
  width="32"
  height="32"
  alt="GitHub"
/>

A projekt jsDelivr-en keresztül is elérhető:

<img
  src="https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/default.svg"
  width="32"
  height="32"
  alt="GitHub"
/>

Ez akkor lehet kényelmes, ha egy kisebb weboldalhoz vagy prototípushoz csak néhány ikonra van szükség, és nem akarunk külön npm-függőséget hozzáadni.

CLI: ikonok közvetlenül a projektbe

A theSVG saját parancssoros eszközt is kínál. A CLI segítségével például egy GitHub-ikon közvetlenül hozzáadható egy projekthez:

npx @thesvg/cli add github

Keresni is lehet:

npx @thesvg/cli search "ai"

Ez fejlesztői környezetben különösen praktikus lehet, mert nem kell böngészőt nyitni, megkeresni az ikont, majd kézzel letölteni és bemásolni.

API és statikus infrastruktúra

A theSVG mögött nem egy hagyományos, dinamikus ikonadatbázis működik. A projekt dokumentációja szerint a webhely statikus, és előre elkészített JSON-manifeszteket használ.

A teljes ikonregiszter a következő végponton érhető el:

https://thesvg.org/api/registry.json

A kategóriákhoz külön végpont tartozik:

https://thesvg.org/api/categories.json

Az egyes SVG-k pedig egységes URL-struktúrán keresztül érhetők el:

https://thesvg.org/icons/{slug}/{variant}.svg

Ez lehetővé teszi, hogy más fejlesztői eszközök és integrációk is a theSVG regiszterére épüljenek.

Figma, VS Code és más eszközök

A projekt egyik legérdekesebb része az ökoszisztéma.

A theSVG-hez több kiegészítő is elérhető:

• Figma plugin – ikonok keresése közvetlenül a Figma felületén, majd szerkeszthető vektorként történő beszúrás;
• VS Code bővítmény – ikonok keresése a parancspalettából, SVG vagy JSX másolása, CDN-link másolása vagy az SVG beszúrása a kurzorhoz;
• Raycast – gyors keresés és másolás macOS-en;
• MCP Server – ikonok lekérése AI-eszközökből;
• Agent Skill – a theSVG használatának átadása AI-agenteknek;
• Neovim plugin – SVG URL vagy inline tartalom beszúrása;
• Alfred Workflow – gyors keresés macOS-en;
• Iconify támogatás – a theSVG ikonok Iconify-kompatibilis környezetekben is használhatók.

A VS Code-bővítmény például a parancspalettából indítható, és egy ikon kiválasztása után többféle kimenetet kínál, köztük SVG-t, JSX-et, CDN-linket és CLI-parancsot. A Figma-plugin pedig közvetlenül a vászonra helyezi az ikont szerkeszthető vektorként.

AI-eszközök és MCP

A projekt az AI-alapú fejlesztői munkafolyamatokra is gondol. A @thesvg/mcp-server csomag MCP-szerverként használható, és a projekt dokumentációja szerint többek között Claude, Cursor és Windsurf környezetében is használható. Ez azt jelenti, hogy az ikonkeresés nem feltétlenül marad külön böngészős feladat: egy kompatibilis AI-eszközből is lekérhetők a megfelelő ikonok.

A projekt Agent Skillt is kínál, amelyet az alábbi paranccsal lehet telepíteni:

npx skills add glincker/thesvg

Ez az AI-agent számára többek között a theSVG CDN-jének és regiszterének használatát tanítja meg.

Miért érdekes a tree-shaking?

Egy több ezer ikont tartalmazó könyvtárnál fontos kérdés, hogy egyetlen GitHub-logó miatt tényleg szükség van-e az egész gyűjteményre. A theSVG egyik fejlesztői célja éppen ezért a tree-shake-elhetőség. A @thesvg/icons csomag használatával az ikonok külön is importálhatók, így a projektbe csak a ténylegesen használt elemek kerülhetnek be. Ez különösen nagyobb webes projektek esetében lehet érdekes, ahol a kliensoldali bundle mérete is szempont.

Előnyök és hátrányok

Előnyök

• Több ezer márka- és technológiai SVG egy helyen.
• AWS, Azure és Google Cloud ikonok is elérhetők.
• Többféle ikonváltozat támogatása.
• SVG-ként és fejlesztői csomagokon keresztül is használható.
• React, Vue és Svelte támogatás.
• CDN-ről is betölthető.
• Saját CLI áll rendelkezésre.
• Figma, VS Code és Raycast integráció.
• MCP-szerver és AI-agent támogatás.
• Nyílt forrású projekt.

Hátrányok

• Nem általános célú UI-ikonkönyvtár: elsősorban márka- és technológiai ikonokra koncentrál.
• Nem minden ikonhoz érhető el minden variáns.
• A márkalogók felhasználásának jogi feltételeit külön kell ellenőrizni.
• A gyűjtemény mérete és az egyes ikonok köre idővel változhat.

Licenc és a márkalogók használata

Itt érdemes egy fontos különbséget tenni.

A theSVG kódja MIT licenc alatt érhető el, de ez nem jelenti azt, hogy a gyűjteményben található összes márkalogó szabadon felhasználható bármilyen célra. Az egyes logók és márkanevek továbbra is a megfelelő jogtulajdonosokhoz tartozhatnak, ezért kereskedelmi, reklám- vagy termékfelhasználás előtt érdemes ellenőrizni az adott márka hivatalos arculati és védjegyhasználati szabályait. Az AWS Architecture ikonok külön feltételek alá tartoznak: a projekt szerint ezek az AWS hivatalos ikoncsomagjából származnak, módosítás nélkül kerülnek terjesztésre, és CC BY-ND 2.0 licenc vonatkozik rájuk. Vagyis a „nyílt forrású projekt” és az „összes benne található logó szabadon felhasználható” nem ugyanazt jelenti.

theSVG vagy egy hagyományos ikonkönyvtár?

A theSVG akkor érdekes igazán, amikor nem egy általános felületi ikonra van szükség. Egy hagyományos UI-ikonkönyvtárból például keresőt, menüt, beállításokat vagy navigációs elemeket választanánk. A theSVG ezzel szemben akkor jön jól, ha egy konkrét szolgáltatást vagy technológiát szeretnénk megjeleníteni. Ha például egy weboldalon azt akarjuk bemutatni, hogy milyen technológiákat használ egy alkalmazás, akkor a React, GitHub, Docker, AWS vagy más szolgáltatások logói sokkal relevánsabbak lehetnek, mint egy általános piktogram.

Mit gondolok a theSVG-ről?

A theSVG első pillantásra egy újabb SVG-logógyűjteménynek tűnhet, de a projekt ennél jóval többet kínál. A több mint 6500 ikon mellett külön AWS-, Azure- és Google Cloud-gyűjteményeket, többféle SVG-változatot, npm-csomagokat, framework-integrációkat, CDN-t, CLI-t, API-t és fejlesztői bővítményeket is találunk. A Figma-, VS Code- és Raycast-integráció, valamint az MCP-szerver pedig azt mutatja, hogy a készítők nem pusztán egy letöltőoldalként gondolnak a projektre. Ha weboldalt, alkalmazást, dokumentációt vagy fejlesztői projektet készítünk, és rendszeresen van szükségünk márka- vagy technológiai SVG-kre, a theSVG praktikus eszköz lehet. A legnagyobb előnye talán éppen az, hogy ugyanazt az ikonforrást többféle módon használhatjuk: egyetlen SVG letöltésétől kezdve a CDN-en át egészen egy React-komponensig vagy AI-asszisztenssel történő használatig.

Gyakori kérdések a theSVG-ről

Ingyenes a theSVG?

A projekt nyílt forrású, a kód MIT licenc alatt érhető el. Ettől azonban az egyes márkalogók és védjegyek használati feltételei nem változnak meg, ezért konkrét felhasználás előtt érdemes ellenőrizni az adott márka szabályait.

Hány ikon található a theSVG-ben?

A projekt jelenlegi dokumentációja szerint több mint 6500 ikon érhető el. A gyűjtemény több mint 4600 márkaikont, 739 AWS Architecture ikont, 626 Azure Service ikont és 214 Google Cloud ikont tartalmaz. A számok a projekt frissítéseivel változhatnak.

Milyen változatok érhetők el?

Az ikonokhoz a projekt akár hétféle változatot is biztosíthat: default, mono, light, dark, wordmark, wordmark light és wordmark dark. Nem minden ikon rendelkezik mindegyikkel.

Használható Reactben?

Igen. A projekt külön @thesvg/react csomagot kínál. Vue 3-hoz és Svelte-hez szintén külön csomag érhető el.

Használható npm nélkül?

Igen. Az ikonok közvetlen SVG-fájlként CDN-ről is betölthetők.

Van CLI?

Igen. A @thesvg/cli csomaggal ikonokat lehet keresni és közvetlenül a projektbe hozzáadni.

Van Figma plugin?

Igen. A projekt hivatalos Figma-pluginja lehetővé teszi a gyűjtemény keresését és az ikonok szerkeszthető vektorként történő beszúrását.

Van VS Code bővítmény?

Igen. A VS Code-bővítményből ikonokat lehet keresni, majd SVG-ként, JSX-ként vagy CDN-linkként kimásolni, illetve az SVG-t közvetlenül a kódba beszúrni.

Használható AI-eszközökkel?

Igen. A projekt külön MCP-szervert és Agent Skillt is biztosít. A dokumentáció szerint az MCP-szerver többek között Claude, Cursor és Windsurf környezetében használható.

Kapcsolódó cikk

👉 Icones – nyílt forráskódú ikonkezelő és ikongyűjtemény