Az eszköz betöltése…
Egységes stílusú, éles SVG ikonok minden méretben. Keress magyarul („kosár”, „naptár”, „szerszám”), állítsd be a színt és a vonalat, és másold a kódot – vagy tedd a weboldaladba két sorral, a kodvena.hu-ról.
Lépésről lépésre
Magyarul vagy angolul, ékezettel vagy anélkül; kategória szerint (pl. Pénzügy, Étel, ital, Közlekedés) is szűrhetsz.
Méret, vonalvastagság, szín, kitöltés, lekerekített vagy szögletes vonalvégek, és ha kell, négyzet vagy kör háttér.
Egy ikont SVG-, React-, Vue-, data URI- vagy CSS-kódként másolsz, vagy SVG-ként és PNG-ként (akár 8× felbontásban) letöltesz.
Jelölj ki többet: ZIP (SVG, PNG, React, Vue), SVG-sprite, vagy egy önálló beágyazó szkript csak ezekkel az ikonokkal.
GYIK
Igen. Az ikonok a Lucide nyílt készletéből valók (ISC licenc, a Feather eredetű ikonoknál MIT): üzleti célra, ügyfélmunkában, appban is ingyen használhatók, módosíthatók. Kérjük, tartsd meg a licencszöveget (a ZIP-ben ott van); a forrásmegjelölés („Ikonok: Lucide”) is ajánlott.
A legegyszerűbb: illeszd be egyszer a <script src="https://kodvena.hu/ikonok/v1/kv-ikonok.js" defer></script> sort, és ahova ikon kell, írd: <i data-ikon="house"></i>. Ha nem szeretnél külső fájlt, másold az SVG-kódot közvetlenül, használd az SVG-sprite-ot, vagy az önálló beágyazót, ami csak a kiválasztott ikonokat tartalmazza.
Nem számottevően: a szkript 3–4 KB, az ikonadat egyszer, tömörítve kb. 100 KB, és csak akkor töltődik le, ha van ikon az oldalon; utána a böngésző gyorsítótárából jön. Nincs süti és nincs követés. Ha minden bájt számít, az önálló beágyazó csak a kiválasztott ikonokat viszi magával.
A készlet egységes, 24×24-es rácsra rajzolt, 2 px-es vonalas stílusú – így bármilyen méretben és színben egyformán élesek, és jól illenek egymáshoz. A „Kétszínű” és „Tömör” kitöltés a zárt formáknál (szív, csillag, kör) ad hangsúlyt.
A beállított méret 1–8-szorosát, legfeljebb 1024 px-ig. Weboldalra inkább az SVG-t ajánljuk: kisebb, és minden kijelzőn éles.
A márkaikonokat a tulajdonosuk szabályai kötik, ezért a nyílt készlet nem tartalmazza őket. A hivatalos logókat a márkák saját sajtóoldalán találod.
Eszközök
Betöltés…
Tedd az oldalba egyszer a szkriptet, és ahova ikon kell, egy <i data-ikon="…"> elemet. A szkript és az ikonadat statikus, gyorsítótárazható fájl a kodvena.hu-n (nincs süti, nincs követés); az adat csak akkor töltődik le, ha van ikon az oldalon. Nem akarsz külső fájlt? Jelölj ki ikonokat, és másold az „Önálló beágyazó” kódot.
<script src="https://kodvena.hu/ikonok/v1/kv-ikonok.js" defer></script>
<i data-ikon="house" data-szin="#0f172a"></i>
<i data-ikon="phone" data-szin="#0f172a"></i>
<i data-ikon="mail" data-szin="#0f172a"></i>Ez a doboz a valódi beágyazó szkripttel rajzol.
Ikonok: Lucide (https://lucide.dev), ISC licenc – a Kódvéna ikonkészletén keresztül (https://kodvena.hu/eszkozok/ingyenes-ikonok). Licenc: LICENSE.txt.