Noch schneller durch Pan-SVG-Plugins
Icons sehen gut aus, können aber Ladezeit kosten. Mit PAN SVG Icons stecken sie als kleines Inline-SVG direkt im Seitencode: kein Font-Download, kein zusätzliches CSS oder JavaScript im Frontend.
🔥 100 % kostenlos – Free Download, keine Lizenz, kein Abo, keine versteckten Kosten! Einfach installieren, Icons wählen, schneller sein. Hier direkt herunterladen.
Viele Websites laden für ein paar Menü-Icons eine ganze Icon-Schrift nach. Das sind zusätzliche Dateien, die der Browser holen muss, bevor die Icons erscheinen. Auf pan4.de gehen wir einen anderen Weg: Die Icons in der Navigation kommen aus dem kostenlosen Plugin PAN SVG Icons, und die Seite erreicht bei PageSpeed Insights trotzdem Spitzenwerte.
⚡ Warum Icons die Ladezeit bremsen können
Eine Icon-Schrift besteht aus einem Stylesheet und einer Schriftdatei. Beides wird zusätzlich angefragt, auch wenn Sie auf einer Seite nur drei Icons brauchen. Solange die Schrift nicht da ist, fehlen die Icons oder springen später ins Bild.
🚀 Was PAN SVG Icons anders macht
- 🪶Inline-SVG statt Schrift – Jedes Icon ist ein kleines SVG im HTML. Es gibt nichts nachzuladen.
- 🚫Kein CSS und kein JavaScript im Frontend – Das Plugin lädt auf Ihrer Website keine eigenen Dateien. Die Icon-Liste für den Editor wird nur im Block-Editor aufgebaut, nie bei normalen Seitenaufrufen.
- 🔒Keine Fremdserver – Kein CDN, kein Tracking, keine externen Anfragen.
- ⚡Cache-sicher – Die Ausgabe ist für alle Besucher gleich und passt zu jedem Seiten-Cache.
- ♿Barrierefrei gedacht – Dekorative Icons sind für Screenreader unsichtbar, Icons mit Alternativtext bekommen
role="img"undaria-label.
📊 Das Ergebnis auf pan4.de
Die Startseite von pan4.de, mit den Icons in der Navigation, bei PageSpeed Insights:
| Messwert | Mobil | Computer |
|---|---|---|
| Leistung | 97 | 99 |
| First Contentful Paint | 1,6 s | 0,4 s |
| Largest Contentful Paint | 2,3 s | 0,4 s |
| Barrierefreiheit | 94 | 94 |
| SEO | 100 | 100 |
Wichtig zur Einordnung: Das ist keine Labor-Gegenüberstellung mit und ohne Plugin. Die Werte einer Seite hängen von vielen Dingen ab, etwa Server, Bildern, Theme und Cache. Die Icons sind ein Baustein, aber einer, der Sie gar nichts kostet: Sie erzeugen keine zusätzliche Anfrage.
🧭 Icons im Menü: ein Standard für alle, Ausnahmen pro Punkt
Im Tab „Website-Menüs“ legen Sie ein Standard-Icon für alle Hauptpunkte und eines für alle Unterpunkte Ihrer Navigationsmenüs fest. Wer einzelne Punkte anders möchte, wählt dort ein eigenes Icon. Das gewählte Icon hat Vorrang. Die Auswahl hat ein Suchfeld (auch auf Deutsch, zum Beispiel „Haus“) und speichert sofort, ohne Seitenwechsel. Es funktioniert mit klassischen Menüs (Design → Menüs).
Position und Größe stellen Sie einmal für alle Menü-Icons ein: Das Icon steht vor oder hinter dem Text, in einer Größe von 10 bis 64 Pixeln.
🧩 Icons auch im Inhalt: Block „PAN Icon“ und Shortcode
Im Editor fügen Sie den Block „PAN Icon“ ein und stellen Größe, Strichstärke, Farbe, Abstand und optional einen Link ein. Alternativ setzen Sie den Shortcode [icon name="check" size="24"] in einen Text, auch in den Shortcode-Baustein Ihres Page-Builders. Die Ausgabe ist immer ein Inline-SVG.
🚀 So einfach geht’s
- Plugin installieren und aktivieren – ZIP herunterladen, unter „Plugins → Installieren → Plugin hochladen“ hochladen und aktivieren. Die Icons für Ihre Website sind sofort bereit, es gibt nichts einzuschalten.
- Standard-Icons wählen – unter „Pan4 → PAN SVG Icons → Website-Menüs“ ein Icon für Hauptpunkte und eines für Unterpunkte anklicken.
- Bei Bedarf einzelne Punkte ändern – Menü auswählen, Icon-Feld anklicken, Icon suchen. Oder den Block „PAN Icon“ und den Shortcode
[icon name="check"]im Inhalt nutzen.
Alle Funktionen im Detail
- ca. 250 gängige Icons (Lucide), Suche auf Deutsch und Englisch
- Block „PAN Icon“ mit Größe, Strichstärke, Farbe, Abstand und optionalem Link, dazu der Shortcode
[icon] - Standard-Icons für Haupt- und Unterpunkte der Website-Menüs, Position (davor oder dahinter) und Größe, Icon je Menüpunkt hat Vorrang
- Optional: Icons im WordPress-Admin-Menü, auch für Untermenüs und Menüs anderer Plugins (ein Schalter, ab Werk aus)
- Import und Export der Einstellungen, eigenes Fehlerprotokoll, eingebaute Hilfe
- Keine eigenen SVG-Uploads: nur geprüfte, mitgelieferte Icons
❓ Häufige Fragen
Ist PAN SVG Icons wirklich schneller als Icon-Schriften?
Beim Laden der Icons ja: Es gibt keine zusätzliche Schriftdatei und kein zusätzliches Stylesheet. Wie schnell Ihre Seite insgesamt ist, hängt von weiteren Faktoren ab. Das Plugin sorgt dafür, dass die Icons nicht dazugehören.
Funktioniert das mit meinem Theme?
Ja, das Plugin ist unabhängig vom Theme. Den Shortcode können Sie in einen Text oder in den Shortcode-Baustein Ihres Page-Builders setzen, zum Beispiel in Elementor.
Gilt das auch für den Navigations-Block des Website-Editors?
Nein. Die Menü-Icons gelten für klassische Menüs (Design → Menüs). Block, Shortcode und Icons im Inhalt funktionieren überall.
Werden Daten an Fremdserver gesendet?
Nein. Alle Icons liegen im Plugin, es gibt kein Tracking und keine externen Anfragen.
🔥 Jetzt kostenlos holen – Free Download!
0 € statt Icon-Schrift-Ballast. Schnellere Seiten durch saubere Icons: kostenlos, ohne Font-Download und ohne Fremdserver.Kostenlos herunterladen – Free Download (ZIP)
