Softonic

SVG-Icon-Builder

x-init="restore()" >
Schritt 1 / 2
Weiter

Erstelle ein klares SVG-Icon, ohne dein Design irgendwohin zu senden. Wähle eines von zwölf eingebauten Symbolen und passe Ausgabegröße, Strichstärke, Strichfarbe, Füllung, Hintergrundfarbe und Eckenradius an. Die fertige Datei nutzt eine feste viewBox von 24×24 und kann als SVG-Code kopiert oder als SVG-Datei geladen werden.

Ein Icon in vier Schritten erstellen

  1. 1

    Symbol auswählen

    Wähle Herz, Stern, Häkchen, Kreuz, Kreis, Quadrat, Dreieck, Pfeil, Blitz, Mond, Sonne oder Glocke. Es sind feste Vorlagen, keine freie Zeichenfläche.

  2. 2

    Ausgabegröße festlegen

    Wähle Breite und Höhe von 32 bis 256 px. Die innere viewBox bleibt 24×24, während sich die Abmessungen ändern.

  3. 3

    Icon gestalten

    Passe die Kontur von 0,5 bis 6 an, wähle ihre Farbe, keine Füllung, currentColor oder die Konturfarbe und lege Hintergrund sowie Eckenradius fest.

  4. 4

    Kopieren oder herunterladen

    Kopiere den erzeugten SVG-Code in die Zwischenablage oder lade die Datei herunter. Der Download trägt den Namen der Vorlage, etwa heart.svg.

Was dieses Werkzeug erstellt

Der Export enthält ein 24×24-SVG, ein Hintergrundrechteck und ein vorgegebenes Symbol. Das eignet sich für ein konsistentes Zeichen in einem Mock-up, einer kleinen Oberfläche oder einem Prototyp. Das Werkzeug importiert keine Grafiken, bearbeitet keine Pfadpunkte, fügt keinen Text hinzu und erzeugt keine eigenen Icons aus einer Beschreibung.

Fülloptionen

Wähle Keine für eine Kontur. currentColor lässt die Füllung der CSS-Eigenschaft color des Elternelements folgen, wenn das SVG inline verwendet wird. Konturfarbe nutzt dieselbe Farbe für Kontur und Füllung. Das Hintergrundrechteck gehört immer zum exportierten SVG.

Im Projekt verwenden

Füge den kopierten Code in HTML oder eine Komponente ein, die inline-SVG akzeptiert. Die heruntergeladene Datei eignet sich als Bildressource. Ist das Symbol nur dekorativ, blende es in deinem Projekt für assistive Technik aus. Vermittelt es Bedeutung, ergänze einen zugänglichen Namen, etwa über ein <title> oder eine Beschriftung des umgebenden Steuerelements.

Datenschutz und Speicherung

Das Icon wird im Browser erzeugt. Seine Einstellungen werden nicht an unseren Server gesendet. In der zweistufigen Ansicht liegen sie im Sitzungsspeicher dieses Browser-Tabs, damit sie im Ergebnis erscheinen; bei Neu beginnen werden sie gelöscht.

Häufig gestellte Fragen

Nein. Dieses Werkzeug gestaltet zwölf eingebaute Symbole. Nutze einen SVG-Pfadeditor, wenn du Pfadbefehle zeichnen oder bearbeiten musst.

Nein. Jeder Export verwendet eine viewBox von 24×24. Nur Breite und Höhe der Ausgabe lassen sich von 32 bis 256 px ändern.

Das Werkzeug fügt immer ein Hintergrundrechteck ein. Wähle Farbe und Eckenradius vor dem Download oder bearbeite das SVG später, wenn dein Projekt Transparenz braucht.

Nein. Das SVG entsteht im Browser, die Einstellungen werden nicht an unseren Server gesendet. Der geführte Ablauf behält sie nur für die Sitzung dieses Tabs, bis du neu beginnst oder die Sitzung endet.

Verwandte Tools

Material Design Farbpicker

Durchsuchen Sie die Material Design Farbpalette. Kopieren Sie jeden Farbton (50 bis A700) als HEX, RGB oder HSL mit einem Klick.

SVG-Kreistext-Generator

Text um einen kreisförmigen Pfad in SVG biegen mit Kontrolle über Radius, Rotation und Schriftart. Exportiere einsatzbereites Markup für Abzeichen, Logos und Stempel.

Vision Board erstellen

Verwandeln Sie Ihre Ziele in ein visuelles Board: Bilder hochladen, persönlichen Titel und Bildunterschriften ergänzen, Farben und Layout wählen und ein druckbares PNG herunterladen. Alles bleibt in Ihrem Browser.

Pantone zu HEX Konverter

Konvertieren Sie Pantone PMS Farben in die nächstgelegenen HEX-, RGB- und CMYK-Werte für die Übereinstimmung von Bildschirm und Druck, mit Farbmustervorschau.

Kontaktbogen erstellen

Ordnen Sie Fotos auf druckbaren A4- oder Letter-Kontaktbögen an, ergänzen Sie Beschriftungen und laden Sie die Seiten als JPEG oder PDF herunter.

Graffiti-Generator

Erstelle Graffiti-Schrift mit Tag-, Bubble-, Block-, Stencil-, Neon- und Wild-Effekten. Passe Farben an und exportiere PNG oder SVG direkt im Browser.

Tool in anderen Sprachen verfügbar