Kostenlose Ressourcen für Webentwickler finden sich im Überfluss, doch die ehrlich gratis nutzbaren trennt vom Rest oft nur ein Blick ins Lizenz-Kleingedruckte.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Genau dort scheitern die meisten Bestenlisten, weil sie Freemium-Köder und echte Geschenke in einen Topf werfen.
Wir haben streng gefiltert. In diese Übersicht kommt nur, was unter CC0, MIT, ISC, Apache 2.0 oder der Open Font License steht oder einen echten Dauer-Free-Tier bietet.
Kein Tool mit Kreditkartenzwang, keine Schrift mit verstecktem Nutzungsverbot, kein Bild mit Abmahnrisiko.
Das Wichtigste in Kürze
- Drei Klassen von gratis: wirklich frei (CC0/MIT/OFL), Attributionspflicht und Freemium-Falle. Nur die erste steht in dieser Liste.
- Kommerziell nutzbar: alle 33 Ressourcen, die meisten sogar ohne Namensnennung.
- Größte Kostenfalle: nicht der Preis, sondern eine übersehene Lizenzbedingung mit Abmahnfolge.
Was wirklich kostenlos bedeutet
Drei Modelle verstecken sich hinter demselben Wort, und nur eines davon bleibt bedingungslos.
CC0 und die Gemeinfreiheit bilden die sauberste Stufe. Die Organisation Creative Commons hat damit einen Weg geschaffen, auf alle Rechte zu verzichten, ganz ohne Namensnennung.
Permissive Code-Lizenzen wie MIT, ISC und Apache 2.0 verlangen nur, den Lizenztext im Quellcode zu belassen. In der sichtbaren Oberfläche bleibt nichts zu tun.
Bei Schriften regelt die Open Font License der SIL den freien Einsatz, inklusive Einbettung und kommerzieller Nutzung. Die einzige Auflage betrifft den Weiterverkauf nackter Schriftdateien.
Dagegen steht die Freemium-Falle. Ein verlockender Gratis-Tarif endet nach 14 Tagen, sperrt den Code-Export oder erzwingt einen sichtbaren Werbe-Backlink. Solche Angebote haben wir konsequent ausgesperrt.
Eine klare Ansage vorweg: Attributionspflicht ist kein Beinbruch, aber eben nicht dasselbe wie kostenlos. Diese Unterscheidung kostet im Ernstfall mehr als jedes Abo.
Code & Editoren
Die Werkbank steht am Anfang jeder Pipeline, und sie kostet nichts.
VS Code ist der Quasi-Standard unter den Editoren. Der Kern Code-OSS steht unter MIT, der Download von Microsoft bleibt dauerhaft gratis.
Git versioniert praktisch die gesamte Branche. Die Software ist quelloffen unter GPLv2 und damit frei für jeden Zweck.
Tailwind CSS liefert ein Utility-First-Framework unter MIT-Lizenz. Der gesamte Funktionsumfang steht ohne Bezahlschranke bereit.
Pico CSS bringt ein klassenloses Mini-Framework für sauberes Standard-HTML, ebenfalls MIT. Ideal für schlanke Prototypen ohne Markup-Ballast.
Icons & SVG
Symbolbibliotheken sind das Minenfeld schlechthin, weil viele Gratis-Sets eine sichtbare Verlinkung erzwingen. Diese fünf tun das nicht. Tiefer geht unser Leitfaden zum Icons erstellen.
Lucide gilt als moderner Goldstandard für saubere Line-Icons. Die ISC-Lizenz verlangt keine Attribution in der Oberfläche.
Heroicons stammt vom Tailwind-Team und liefert handgezeichnete SVGs unter MIT. Direkt als Inline-Code ins HTML kopierbar.
Bootstrap Icons umfasst über 2.000 Symbole vom Bootstrap-Team, MIT-lizenziert. Auch außerhalb von Bootstrap frei verwendbar.
Tabler Icons punktet mit mehreren Tausend konsistenten Strichsymbolen, ebenfalls MIT. Saubere Rasterung, klare Linienführung.
Material Symbols von Google sind variable Icons unter Apache 2.0. Füllung, Gewicht und optische Größe lassen sich stufenlos justieren.
Schriften & Webfonts
Typografie macht oder bricht ein Layout, und freie Qualität ist längst Normalität. Für alle, die noch weiter gehen und eine eigene Schriftart erstellen möchten, haben wir sechs Tools im Vergleich.
Google Fonts bündelt über tausend quelloffene Familien, ganz überwiegend unter der Open Font License. Selbst-Hosting ist ausdrücklich erlaubt und aus Datenschutzsicht oft die bessere Wahl.
Fontsource packt genau diese Open-Source-Schriften als npm-Pakete fürs lokale Einbinden. Kein externer Request, volle Kontrolle über die Ladekette.
Fontshare kommt von der Indian Type Foundry und stellt hochwertige Familien gratis für private wie kommerzielle Projekte bereit. Die Qualität spielt in der Liga kommerzieller Foundries.
Font Library sammelt freie Schriften unter CC0 und OFL an einem Ort. Ein Fundus jenseits der üblichen Verdächtigen.
Bilder, Illustrationen & Video
Visuelles Material ist der häufigste Abmahngrund überhaupt, deshalb zählt hier jede Lizenzzeile. Saubere Quellen sammelt unsere Übersicht zu lizenzfreien Bildern.
Unsplash liefert hochauflösende Fotos unter eigener Lizenz, kommerziell nutzbar und ohne Pflicht zur Namensnennung.
Pexels bietet Fotos und dazu eine umfangreiche Videosektion in HD und 4K. Keine Quellenangabe nötig, kommerziell freigegeben.
Pixabay stellt Fotos, Vektoren und Clips unter seiner Inhaltslizenz bereit, ohne Attributionszwang. Die Qualität schwankt, der Umfang gleicht das aus.
unDraw ist die Referenz für anpassbare Vektor-Illustrationen, frei und ohne Attribution selbst kommerziell. Die Akzentfarbe lässt sich vor dem Download an die eigene Marke angleichen.
Humaaans von Designer Pablo Stanley liefert modulare Menschen-Illustrationen unter CC0. Kopf, Körper und Pose kombinieren sich wie Lego.
Open Peeps stammt vom selben Schöpfer und bietet handgezeichnete Figuren unter CC0, gut für eine nahbare, skizzenhafte Bildsprache.
Farben, UI & Hilfstools
Die kleinen Helfer sparen im Alltag die meiste Zeit.
Color Hunt kuratiert fertige Farbpaletten zum direkten Übernehmen. Kein Account, kein Limit.
Realtime Colors zeigt eine Palette sofort an einem echten Layout, nicht an leeren Kästchen. Das verkürzt die Abstimmung mit Kunden spürbar.
Open Color ist ein quelloffenes Farbschema unter MIT, optimiert für Oberflächen. Konsistente Abstufungen ohne eigenes Rätselraten.
Squoosh komprimiert Bilder direkt im Browser, quelloffen von Google. Die Datei verlässt dabei nie den eigenen Rechner.
Lorem Picsum liefert Platzhalterbilder per simpler URL, MIT-lizenziert. Perfekt für Prototypen und Layout-Tests.
RealFaviconGenerator erzeugt den kompletten Favicon-Satz für alle Plattformen. Das Favicon gehört zum Minimalstandard jedes seriösen Auftritts.
Hosting, Deployment & APIs
Hier trennt sich echter Free-Tier vom getarnten Trial. Diese vier laufen dauerhaft auf null Euro.
GitHub Pages hostet statische Seiten direkt aus dem Repository, kostenlos und ohne Zeitlimit. Der schnellste Weg zur Live-URL.
Cloudflare Pages bringt großzügige Limits, globales CDN und unbegrenzte Anfragen im Gratis-Tarif. Für die meisten Projekte reicht das auf Dauer.
Netlify punktet mit Build-Pipeline und Serverless-Funktionen im echten Free-Tier, kein Ablaufdatum. Deploy per Git-Push in Sekunden.
Public APIs ist ein quelloffenes Verzeichnis hunderter frei nutzbarer Schnittstellen. Wetterdaten, Wechselkurse, Testdaten, alles an einem Ort.
Lernen & Dokumentation
Wissen ist die Ressource, die nie veraltet, und die besten Quellen kosten nichts.
MDN Web Docs von Mozilla ist die Referenz für HTML, CSS und JavaScript. Frei lizenziert und sachlich konkurrenzlos.
freeCodeCamp bietet ein quelloffenes Curriculum samt echten Projekten, getragen von einer gemeinnützigen Organisation. Vom Einstieg bis zum Zertifikat ohne Gebühr.
web.dev liefert Googles Leitfäden zu Performance, Barrierefreiheit und Core Web Vitals. Praxisnah und am aktuellen Stand.
The Odin Project führt mit einem komplett offenen Lehrplan vom Nullpunkt zum Full-Stack. Quelloffen und community-gepflegt.
Die komplette Übersicht: kostenlose Ressourcen für Webentwickler auf einen Blick
Alle 33 Quellen mit Adresse zum direkten Abtippen. Die Adressen bleiben bewusst als Klartext, damit die Tabelle als Referenz dient.
| # | Ressource | Adresse |
|---|---|---|
| 1 | VS Code | code.visualstudio.com |
| 2 | Git | git-scm.com |
| 3 | Tailwind CSS | tailwindcss.com |
| 4 | Pico CSS | picocss.com |
| 5 | Lucide | lucide.dev |
| 6 | Heroicons | heroicons.com |
| 7 | Bootstrap Icons | icons.getbootstrap.com |
| 8 | Tabler Icons | tabler.io/icons |
| 9 | Material Symbols | fonts.google.com/icons |
| 10 | Google Fonts | fonts.google.com |
| 11 | Fontsource | fontsource.org |
| 12 | Fontshare | fontshare.com |
| 13 | Font Library | fontlibrary.org |
| 14 | Unsplash | unsplash.com |
| 15 | Pexels | pexels.com |
| 16 | Pixabay | pixabay.com |
| 17 | unDraw | undraw.co |
| 18 | Humaaans | humaaans.com |
| 19 | Open Peeps | openpeeps.com |
| 20 | Color Hunt | colorhunt.co |
| 21 | Realtime Colors | realtimecolors.com |
| 22 | Open Color | yeun.github.io/open-color |
| 23 | Squoosh | squoosh.app |
| 24 | Lorem Picsum | picsum.photos |
| 25 | RealFaviconGenerator | realfavicongenerator.net |
| 26 | GitHub Pages | pages.github.com |
| 27 | Cloudflare Pages | pages.cloudflare.com |
| 28 | Netlify | netlify.com |
| 29 | Public APIs | publicapis.dev |
| 30 | MDN Web Docs | developer.mozilla.org |
| 31 | freeCodeCamp | freecodecamp.org |
| 32 | web.dev | web.dev |
| 33 | The Odin Project | theodinproject.com |
Vergleich: Lizenz und Catch auf einen Blick
Die Lizenz entscheidet, was erlaubt ist, der Catch zeigt die einzige Bedingung. Hand aufs Herz: genau diese Zeile überspringen die meisten.
| Ressource | Lizenz | Catch |
|---|---|---|
| Lucide, Heroicons, Bootstrap & Tabler Icons | MIT / ISC | Lizenztext im Quellcode belassen |
| Material Symbols | Apache 2.0 | keiner für die Oberfläche |
| Humaaans, Open Peeps, Pixabay | CC0 | keiner |
| unDraw | frei, ohne Attribution | nicht in Packs weiterverteilen |
| Unsplash, Pexels | eigene Lizenz | nicht als Konkurrenz-Stock anbieten |
| Google Fonts, Fontshare, Font Library | OFL | Schriftdatei nicht einzeln verkaufen |
| Tailwind, Pico, Open Color | MIT | Lizenztext belassen |
| GitHub Pages, Cloudflare Pages, Netlify | Free-Tier | Tarifgrenzen beachten |
Recht & Abmahnschutz
Die teuerste Falle ist nicht der vergessene Tarif, sondern die übersehene Lizenzbedingung.
Attribution bleibt der häufigste Stolperstein. Steht eine Namensnennungspflicht im Kleingedruckten, gehört der Credit sichtbar ins Impressum oder direkt ans Element, sonst droht die Abmahnung.
Ein simpler Lizenz-Nachweis schützt im Streitfall. Wir empfehlen eine Datei im Projekt, die pro Ressource Quelle, Lizenz und Downloaddatum festhält.
Bei Code-Bibliotheken reicht die mitgelieferte Lizenzdatei im Verzeichnis node_modules. Das Löschen dieser Dateien bricht formal die MIT- und ISC-Bedingung.
Die Grundregel lautet schlicht: nur aus vertrauenswürdiger Quelle laden und die Bedingungen zum Downloadzeitpunkt sichern. Diese fünf Minuten Dokumentation sparen im Zweifel einen vierstelligen Betrag.
Die ehrlichste Zahl in jeder Tool-Liste ist nicht der Preis, sondern die Zeile darunter. Wir prüfen jede Lizenz, weil ein vergessener Attributionslink unsere Leser am Ende teurer kommt als jedes Abo.
— Markus Seyfferth, Chefredakteur Dr. Web
Glossar
CC0
CC0 steht für den vollständigen Rechteverzicht, jede Nutzung erlaubt, keine Namensnennung nötig.
MIT-Lizenz
Die MIT-Lizenz ist eine sehr freizügige Code-Lizenz, einzige Pflicht ist das Belassen des Lizenztexts im Quellcode.
ISC-Lizenz
Die ISC-Lizenz ist funktional gleichwertig zu MIT, nur kürzer formuliert.
Apache 2.0
Apache 2.0 ist eine freizügige Lizenz mit zusätzlicher ausdrücklicher Patentregelung.
Open Font License
Die Open Font License der SIL erlaubt Einbettung und kommerzielle Nutzung und untersagt nur den Verkauf nackter Schriftdateien.
Public Domain
Public Domain bezeichnet Werke ohne bestehendes Urheberrecht, uneingeschränkt nutzbar.
Freemium
Freemium meint einen kostenlosen Basistarif als Einstieg, zentrale Funktionen kosten extra.
Free-Tier
Der Free-Tier ist ein dauerhaft kostenloser Tarif, klar abgegrenzt vom befristeten Trial.
Attribution
Attribution ist die Pflicht zur sichtbaren Namensnennung des Urhebers.
CDN
Ein CDN verteilt Inhalte über standortnahe Server und liefert sie dadurch schneller aus.
SVG
SVG ist ein Vektorformat als reiner Text, skalierbar ohne Qualitätsverlust und per CSS gestaltbar.
Tree-Shaking
Tree-Shaking entfernt automatisch ungenutzten Code, hier relevant für schlanke Icon-Einbindung.
FAQ
Welche kostenlosen Ressourcen für Webentwickler sind wirklich gratis?
Wirklich gratis sind Quellen unter CC0, MIT, ISC, Apache 2.0 oder der Open Font License sowie Dienste mit echtem Free-Tier. Alle 33 Einträge dieser Liste erfüllen genau dieses Kriterium und bleiben auch kommerziell kostenfrei.
Dürfen Sie kostenlose Ressourcen kommerziell nutzen?
Ja, sofern die Lizenz kommerzielle Nutzung erlaubt, und das tun alle hier gelisteten Quellen. Ein Blick in die konkrete Bedingung lohnt dennoch, da manche Anbieter den Weiterverkauf der nackten Datei ausschließen.
Wo finden Sie kostenlose Icons für Ihre Website?
Saubere Anlaufstellen ohne Attributionszwang sind Lucide, Heroicons, Bootstrap Icons, Tabler Icons und Material Symbols. Alle stehen unter MIT, ISC oder Apache 2.0 und verlangen keine sichtbare Namensnennung.
Welche kostenlosen Schriften dürfen Sie kommerziell nutzen?
Schriften unter der Open Font License sind kommerziell frei, inklusive Einbettung auf der Website. Google Fonts, Fontshare und Font Library liefern genau solche Familien.
Was unterscheidet CC0 von der MIT-Lizenz?
CC0 verzichtet vollständig auf alle Rechte und verlangt nichts, ideal für Bilder und Illustrationen. MIT erlaubt ebenfalls fast alles, fordert aber das Belassen des Lizenztexts im Quellcode, was nur Entwickler betrifft.
]]>
