1
Das CMS hat den Icon-Slot — das passende PNG fehlt
Viele Templates, Builder und CMS-Module haben Cards, Benefit-Listen oder Info-Boxen mit Icon-Platzhalter. Nur das fertige PNG in der richtigen Farbe und Größe fehlt genau in diesem Moment.
Kostenloser Icon-PNG-Generator — ohne Login
Icons mit Hintergrund, Farbe und Radius anpassen — als PNG herunterladen ohne SVG-Aufwand.
Wählen Sie aus über 5.000 Icons, passen Sie Farbe, Hintergrundfarbe und Border-Radius an Ihre Marke an und exportieren Sie das Ergebnis direkt als PNG. Ohne Login. Ohne Figma. Ohne SVG-Kenntnisse.
Kostenlos im Browser 6 074+ Icons als Basis Farbe, Hintergrund und Radius frei anpassbar
50
sofort nutzbare Icons für typische Website-Elemente
0
Registrierung erforderlich
100%
direkt im Browser konfigurierbar
Das bekannte Mini-Problem
Website-Section fertig, aber das passende Icon als PNG fehlt
2
SVG bearbeiten ist für ein einzelnes Icon zu aufwendig
Wer ein Icon mit Markenfarbe und Hintergrund als PNG braucht, will kein SVG von Hand anpassen, keine Icon-Library einrichten und kein Figma-Projekt öffnen.
3
Kleine Aufgaben bremsen trotzdem
Ein einzelnes Icon klingt banal. In der Praxis hält es aber oft genau die Section auf, die heute noch live gehen sollte.
Direkt ausprobieren
Icon-PNG-Generator: Farbe, Hintergrund und Radius live anpassen
Durchsuchen Sie über 5.000 Icons, passen Sie Farbe, Hintergrundfarbe, Border-Radius und Exportgröße live an und laden Sie das Ergebnis als PNG herunter. Ideal für Feature-Cards, Kontaktboxen, Benefit-Listen und andere CMS-Bausteine.
- Über 5.000 Icons durchsuchen — auf Deutsch oder Englisch
- Farbe, Hintergrundfarbe, Border-Radius und Größe live anpassen
- Fertiges Icon-PNG direkt herunterladen — ohne Login
Icons für Website und Marketing finden
Die Suche reagiert sofort. Ohne Eingabe sehen Sie ein kuratiertes Set für typische Website-, Sales- und Kampagnen-Icons.
Starter-Set
Kuratierte Auswahl
Angezeigt 1-50 von 50
Ein Favicon für die eigene Website gesucht? Mit dem Favicon Generator entsteht aus einem Icon oder Logo das komplette Paket mit ICO, PNG und HTML-Code.
Typische Website-Slots
Icon-PNGs mit Hintergrund: typische Einsatzbereiche auf Websites
Feature- und Benefit-Karten
Quadratische Icon-Kacheln mit Hintergrund für Vorteile, Leistungen, Pakete oder Produktmodule. Genau dort, wo ein kleines visuelles Signal die Section lesbarer macht.
Kontakt- und Trust-Bereiche
Icons für Telefon, E-Mail, Standort, Öffnungszeiten, Prozesse oder Garantien. Einheitlich gestaltet statt aus drei verschiedenen Quellen zusammengewürfelt.
Pflegbare CMS-Inhalte
Wenn Redakteure oder Kunden später neue Inhalte ergänzen, können sie sich einfach wieder das passende PNG im gleichen Stil erzeugen.
So funktioniert es
In drei Schritten zum fertigen Icon-PNG mit Hintergrund und Markenfarbe
1. Passendes Icon suchen
Suchen Sie nach Begriffen auf Deutsch oder Englisch und wählen Sie das Symbol, das inhaltlich zu Ihrer Section passt.
2. An Ihre Marke anpassen
Ändern Sie Farbe, Hintergrund, Radius, Format und Größe so, dass das Icon zur Seite und zur Brand-Color passt.
3. Direkt als PNG exportieren
Laden Sie das Ergebnis sofort herunter und verwenden Sie es dort, wo Sie gerade Inhalte pflegen. Ihre Einstellungen bleiben lokal gespeichert.
Icons für Ihre Website: Größe, Format und Stil
Ein gutes Icon macht eine Seite leichter lesbar. Mit ein paar einfachen Regeln sieht es auf jedem Bildschirm sauber aus.
PNG, SVG oder ICO?
PNG speichert ein Bild ohne Qualitätsverlust und kann einen durchsichtigen Hintergrund haben. Deshalb passt es gut zu Icons, Logos und Grafiken mit klaren Kanten. Soll Ihr Icon auf farbigen Flächen stehen, wählen Sie im Tool einen transparenten Hintergrund.
SVG ist ein Vektorformat. Es lässt sich auf jede Größe bringen und bleibt dabei scharf. Wenn Ihre Website oder Ihr CMS SVG-Dateien annimmt, ist das eine gute Wahl. Wenn nicht, ist PNG das richtige Format.
ICO ist ein altes Windows-Format für Programm-Symbole. Für normale Website-Inhalte rät MDN davon ab; es lebt nur noch als favicon.ico weiter. Für ein Favicon brauchen Sie ohnehin mehrere Dateien – die erstellt unser Favicon Generator aus einem einzigen Icon.
Welche Größe sollten Sie herunterladen?
Exportieren Sie das Icon größer, als es später auf der Seite erscheint. Manche Bildschirme sind hochauflösend: Dort kommen auf einen Bildpunkt Ihrer Seite zwei oder mehr echte Pixel. Ein zu kleines Bild wirkt dann körnig.
Ein Beispiel: Zeigt Ihre Seite das Icon 64 Pixel breit an, laden Sie mindestens 128 Pixel herunter. Im Tool ist 200 Pixel eine gute Wahl. Sie können zwischen 100 und 1.600 Pixeln wählen. Viel größer als nötig sollte das Bild aber nicht sein, sonst wird nur die Datei schwerer.
Ein Stil für die ganze Website
Nehmen Sie möglichst Icons aus einer Sammlung, mit gleicher Linienstärke und wenigen Farben. Dann wirken Karten, Listen und Kontaktboxen ruhig und zusammengehörig. Das Tool hilft dabei: Es merkt sich Farben, Ecken, Linienstärke und Größe für Ihren nächsten Besuch.
Icons wirken am besten neben einer kurzen Überschrift und einem Nutzen-Text. Wie Icons, Text und ein klarer Call-to-Action auf einer Seite zusammenspielen, zeigt unser Beitrag Landingpage erstellen.
Genug Kontrast zum Hintergrund
Ein Icon muss sich klar vom Hintergrund abheben. Die Richtlinie für Barrierefreiheit (WCAG) verlangt für Grafiken, die man zum Verstehen braucht, einen Kontrast von mindestens 3:1 zu den Farben daneben. Für reine Dekoration gilt das nicht. Sehr helle Farben auf Weiß sind deshalb heikel. Auf Wunsch sehen wir uns Kontraste auch im kostenlosen Website-Check an.
Icons ergänzen Text – sie ersetzen ihn nicht
Nicht jeder versteht ein Symbol gleich. Schreiben Sie deshalb immer einen kurzen Text neben das Icon.
Screenreader – Programme, die blinden und sehbehinderten Menschen eine Seite vorlesen – nutzen den Alternativtext (alt-Text) eines Bildes. Steht das Icon nur als Schmuck neben einem Text, der schon alles sagt, lassen Sie den alt-Text leer (alt=""). Ist das Icon selbst ein Link oder Knopf, beschreibt der alt-Text, was passiert: also „Seite drucken“ statt „Drucker-Symbol“.
Quellen (Stand November 2026): MDN: Image file type and format guide · MDN: Using responsive images in HTML · W3C WAI: Understanding SC 1.4.11 Non-text Contrast · W3C WAI: Decorative Images · W3C WAI: Functional Images · Tabler Icons: MIT License
FAQ
Häufige Fragen zum Icon Generator
Ja, das Tool ist kostenlos. Sie brauchen weder ein Konto noch eine Anmeldung. Es läuft direkt in Ihrem Browser, und das PNG entsteht auf Ihrem Gerät.
Ja. Die Icons stammen aus der freien Sammlung Tabler Icons. Sie steht unter der MIT-Lizenz, die auch eine geschäftliche Nutzung erlaubt.
Etwa doppelt so groß, wie das Icon auf Ihrer Seite erscheint. So bleibt es auch auf hochauflösenden Bildschirmen scharf. Für ein Icon mit 64 Pixeln Breite also mindestens 128 Pixel; im Tool sind 200 Pixel eine gute Wahl. Zur Auswahl stehen 100 bis 1.600 Pixel.
SVG bleibt in jeder Größe scharf und ist ideal, wenn Ihre Website oder Ihr CMS SVG-Dateien annimmt. Der Icon Generator erstellt PNG-Dateien: Sie speichern das Bild ohne Qualitätsverlust und können einen transparenten Hintergrund haben. Nimmt Ihr System kein SVG an, ist PNG das richtige Format.
Nutzen Sie dafür unseren kostenlosen Favicon Generator. Er bietet dieselben Icons und erstellt alle nötigen Dateien – ICO, PNG und das Apple-Icon – samt HTML-Code. Ein einzelnes PNG aus dem Icon Generator reicht für ein Favicon nicht aus.
Nur in Ihrem eigenen Browser (im lokalen Speicher). Farben, Hintergrund, Ecken, Linienstärke und Exportgröße sind so beim nächsten Besuch wieder da. Nichts davon wird an einen Server geschickt. Wenn Sie Ihre Browserdaten löschen, sind die Einstellungen zurückgesetzt.
Wenn aus vielen kleinen Aufgaben ein größeres Problem wird
Ein gutes Icon hilft. Ein pflegbares Website-System hilft dauerhaft.
Das Tool löst den schnellen Asset-Bedarf. Wenn Website-Änderungen insgesamt zu langsam, zu technisch oder zu abhängig von Dritten sind, liegt das Problem meist nicht beim Icon, sondern beim System dahinter.
Was das Tool direkt löst
- Passendes Icon für eine Section finden
- PNG im gewünschten Stil exportieren
- Kleine Content-Blocker sofort auflösen
Was JetPages darüber hinaus löst
- Pflegbare Unternehmenswebsites ohne WordPress-Chaos
- Klare Strukturen für Cards, Sections und Inhalte
- Ein System, in dem auch spätere Änderungen ruhig bleiben
Das sagen unsere Kunden
Echte Ergebnisse, echte Stimmen
Mit JetPages konnten wir unsere Landingpages in Rekordzeit online bringen. Keine Wartezeiten mehr auf externe Agenturen — unser Marketing-Team ist jetzt wirklich unabhängig.
Soco Batsuren
Founder of SB Logistics LLC
Für uns war besonders wichtig, dass wir internationale Kampagnen ohne lange Übersetzungsprozesse starten können. Mit einem Klick haben wir unsere Inhalte in 7 Sprachen online.
Julia Leitner
Marketing-Team momoscreen
Wir sind extrem glücklich mit dem Ergebnis. Früher war jede kleine Änderung mühsam. Heute können wir Seiten und Inhalte mit JetPages selbst pflegen und aktualisieren. Das geht wirklich kinderleicht und unsere Website wirkt endlich so professionell, wie unser Unternehmen arbeitet.
David Schneider
Geschäftsführung
Wenn nicht nur das Icon fehlt
Wir helfen auch dann, wenn das eigentliche Problem die Website selbst ist.
Wenn Ihre Website insgesamt schwer pflegbar ist, Inhalte zu langsam live gehen oder WordPress mehr Arbeit macht als Nutzen bringt, können wir uns Ihr Setup direkt ansehen.
JetCoders aus Wien
Projekte ab 2.000 EUR
Technik + Copy + Conversion