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
Action Hourglass Empty - Material Icons iconFree Action Hourglass Empty vector icon from the Material Icons open-source icon library; outline style, Apache-2.0 licence, viewBox 0 0 24 24, 464 bytes.
Vektoreigenschaften: material-round-action-action-hourglass-empty | 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

AI & Procedural 3D Icon Generator - Badge Builder, Lighting & Prompt Studio

Transform flat monochrome UI icons into vibrant 3D squircle app icons, duotone brand badges, and animated micro-interaction vectors. The Procedural Icon Generator combines SVG <feDropShadow> lighting filters, multi-stop gradients, optical padding, and an integrated AI Prompt Studio for Claude, ChatGPT, Midjourney, and v0.

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

Unterstützte Eingabequellen

76.166 base vector icons + custom geometric primitives + AI style presets

Export- und Compilerziele

3D-lit SVG, 1024x1024 / 2048x2048 App Store PNG/WebP, AI Engineering Prompts

Technische Wirkung und Leistung

Generates resolution-independent 3D badge icons at < 2 KB instead of heavy 200 KB raster renders

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

  1. 1

    Pick a base icon from the library or import your own SVG path.

  2. 2

    Choose the badge shape (squircle, rounded square, circle) and border.

  3. 3

    Apply gradient stops and 3D lighting, then add badge text if needed.

  4. 4

    Export the ready icon in every target size at once.

Eingabe-Beispiel

A lantern icon path plus badge text "NEW"

Ausgabe-Beispiel

PNG 512 with gradient lighting plus matching SVG and CSS background

Einschränkungen

  • Badge text metrics depend on the selected font and may shift at small sizes.
  • Raster exports are limited to 1024 px per side.
  • One badge layout is rendered per run; multi-icon sheets belong to the sprite tool.
  • Imported SVG files are capped at 2 MB each.

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

Quelle und Lizenz des Symbols

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