Zum Inhalt springen
Badges Ohne Anmeldung | 100% im Browser verarbeitet

SVG-Icon-Matrix und Badge-Generator

Parametrische Erzeugung von SVG-Icons: eigene Squircle-/Sechseck-Rahmen, mehrstufige Verläufe, Status-Badges und sofortiger Framework-Export.

100%
Form hinzufügen:

Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.

X: 12.0 | Y: 12.0 WCAG AAA | 17.4:1
Vektoreigenschaften: heroicons-20px-solid-document-magnifying-glass | Im SVG-Editor bearbeiten 24x24 | 0.3 KB
Live-Vorschau der Größen:
16px
24px
32px
Dunkle Oberfläche
icon-generator

Sprite-Ablage für mehrere Symbole

Hefte mehrere angepasste Symbole an und baue ein gemeinsames Symbolblatt.

Noch keine Symbole angeheftet. Hefte Symbole an, um sie in einem Blatt zu sammeln.

KI-Prompt und Vektor-Verbesserung

KI-Prompts erzeugen oder Symbol auf der Leinwand verbessern

Wähle eine Vorlage, kopiere den Prompt in dein KI-Werkzeug oder verbessere das Symbol auf der Leinwand.

Technische Doku und Engineering-Leitfaden

SVG-Icon-Matrix und Badge-Generator

Parametrische Erzeugung von SVG-Icons: eigene Squircle-/Sechseck-Rahmen, mehrstufige Verläufe, Status-Badges und sofortiger Framework-Export.

Unterstützte Eingabequellen

Katalog-Icons, eigene SVG-Pfade und geometrische Badge-Vorlagen

Export- und Compilerziele

3D-beleuchtetes SVG, 512/1024-px-PNG & WebP sowie strukturierte KI-Prompts

Technische Wirkung und Leistung

Erzeugt gestochen scharfe Vektor-Badges unter 2 KB statt schwerer Rastergrafiken

So verwendest du SVG-Icon-Matrix und Badge-Generator

  1. 1

    Wählen Sie ein Basis-Icon aus dem Katalog oder importieren Sie einen eigenen SVG-Pfad.

  2. 2

    Bestimmen Sie die Badge-Form (Squircle, abgerundetes Quadrat, Kreis) und den Rahmen.

  3. 3

    Passen Sie Farbverläufe und 3D-Beleuchtung an und ergänzen Sie optional einen Badge-Text.

  4. 4

    Exportieren Sie das fertige Icon direkt in allen gewünschten Zielgrößen.

Eingabe-Beispiel

Laternen-Icon-Pfad mit dem Badge-Text „NEW“

Ausgabe-Beispiel

512-px-PNG mit Verlaufsbeleuchtung sowie passendes SVG und CSS-Hintergrund

Einschränkungen

  • Die Abmessungen des Badge-Textes hängen von der Schriftart ab und können bei kleinen Größen variieren.
  • Rasterexporte sind in diesem Generator auf 1024 px Kantenlänge begrenzt.
  • Pro Durchlauf wird ein einzelnes Badge erstellt; für Icon-Sammlungen dient der Sprite-Generator.
  • Importierte SVG-Dateien dürfen maximal 2 MB groß sein.

Dateien, die Sie in diesem Arbeitsbereich öffnen oder einfügen, werden lokal in Ihrem Browser verarbeitet. Nichts wird auf einen Server hochgeladen.

Leitfäden zu diesem Werkzeug

Tippe, um 76.166 Vektorsymbole zu durchsuchen...

Navigieren | Enter öffnen Alle Icons erkunden

Vergleichen

Lizenz Kommerzielle Nutzung Nennung Ändern oder umfärben
MITErlaubtHinweis im PaketErlaubt
ISCErlaubtHinweis im PaketErlaubt
Apache-2.0ErlaubtPflicht mit HinweisdateiErlaubt
CC BY 4.0ErlaubtNennung nötigErlaubt
CC-BY-SA-4.0ErlaubtWeitergabe unter gleichen BedingungenWeitergabe unter gleichen Bedingungen
Trademark / BrandNur referenzielle NutzungRegeln des InhabersEingeschränkt

Icon-Vorschau