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 hinzufuegen:

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
Cassette - Bootstrap Icons iconFree Cassette vector icon from the Bootstrap Icons open-source icon library; scalable W3C SVG 2.0 graphic for web and design use.
Vektoreigenschaften: bootstrap-regular-cassette | Im SVG-Editor bearbeiten 24x24 | 0.3 KB
Live-Vorschau der Groessen:
16px
24px
32px
Dunkle Oberflaeche
icon-generator

            
Sprite-Ablage fuer 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

Waehle 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.

Unterstuetzte 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.

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

Tippe, um 76,166 Vektorsymbole zu durchsuchen...

Navigieren | Enter oeffnen Alle Icons erkunden

Vergleichen

Quelle und Lizenz des Symbols

Lizenz Kommerzielle Nutzung Nennung Aendern oder umfaerben
MITErlaubtHinweis im PaketErlaubt
ISCErlaubtHinweis im PaketErlaubt
Apache-2.0ErlaubtPflicht mit HinweisdateiErlaubt
CC BY 4.0ErlaubtNennung noetigErlaubt
CC-BY-SA-4.0ErlaubtWeitergabe unter gleichen BedingungenWeitergabe unter gleichen Bedingungen
Trademark / BrandNur referenzielle NutzungRegeln des InhabersEingeschraenkt

Icon-Vorschau