MJEANROY

Lordicon: Animierte Icons für Ihre Websites und Projekte

Lukas Fuchs vor 2 Jahren Design & Technik 3 Min. Lesezeit

Was ist Lordicon und wofür wird es verwendet?

Lordicon ist eine webbasierte Plattform, die es dir ermöglicht, animierte Symbole (Icons) für deine Websites und Projekte zu erstellen, zu bearbeiten und zu verwenden. Mit Lordicon kannst du lebendige und ansprechende visuelle Elemente auf deinen Seiten einbinden, um die Benutzerinteraktion zu verbessern, visuelle Geschichten zu erzählen und die Ästhetik deiner Projekte zu verfeinern.

Lordicon wird von Designern, Entwicklern und Unternehmen gleichermaßen eingesetzt, um eine Vielzahl von Zwecken zu erfüllen, darunter:

Hauptanwendungsfälle von Lordicon:

  • Website-Interaktionen: Animierte Symbole können als interaktive Elemente dienen, die beim Scrollen, Hovern oder Klicken Aktionen auslösen.
  • Erklärvideos und Anleitungen: Nutze animierte Symbole, um komplexe Konzepte oder Prozesse visuell darzustellen und sie für das Publikum leichter verständlich zu machen.
  • Social-Media-Werbung: Animierte Symbole können Aufmerksamkeit auf deine sozialen Beiträge lenken und die Interaktionsraten erhöhen.
  • Marketingmaterialien: Integriere animierte Symbole in E-Mails, Präsentationen und andere Marketingmaterialien, um deinen Inhalten einen dynamischen Touch zu verleihen.

Vorteile der Verwendung von Lordicon

Lordicon bietet eine Reihe von Vorteilen, die es zu einer lohnenden Option für die Integration animierter Icons in deine Websites und Projekte machen:

Umfangreiche Icon-Bibliothek

Mit über 2.000 hochwertigen Icons in verschiedenen Stilen und Designs bietet Lordicon eine umfassende Auswahl, aus der du wählen kannst. Du findest Symbole für alle gängigen Kategorien, von Social Media über Technologie bis hin zu Finanzen und mehr.

Anpassbare Symbole

Lordicon ermöglicht es dir, die Symbole nach deinen Wünschen anzupassen, indem du Farbe, Größe, Animation und andere Eigenschaften änderst. Du kannst auch deine eigenen benutzerdefinierten Symbole erstellen und mit anderen teilen.

Einfache Integration

Lordicon lässt sich mühelos in deine Websites integrieren, unabhängig von der verwendeten Technologie. Du kannst ihre Icons über ihre CDN-Bibliothek oder durch die direkte Einbettung von Code hinzufügen.

Verbesserte Benutzererfahrung

Animierte Icons können die Benutzererfahrung deiner Website erheblich verbessern, indem sie ihr ein dynamisches und ansprechendes Element verleihen. Sie können die Aufmerksamkeit auf wichtige Aufrufe zum Handeln lenken und die Navigation intuitiver gestalten.

SEO-Vorteile

Lordicon-Symbole sind SVG-basiert, was sie suchmaschinenfreundlich macht. Sie können helfen, deine Website in Suchergebnissen höher zu ranken, indem sie eine semantische Bedeutung für deine Inhalte hinzufügen.

Kosteneffizient

Lordicon bietet eine Vielzahl von Preisplänen, darunter eine kostenlose Option für kleine Projekte. Der kostenpflichtige Plan bietet noch mehr Funktionen, wie z. B. unbegrenzte Symbole, benutzerdefinierte Farben und erweiterte Anpassungsoptionen.

So integrierst du Lordicon in deine Websites

Um Lordicon zu nutzen, musst du Folgendes tun:

1. Hol dir den Lordicon-Code

  • Gehe auf die Lordicon-Website (https://lordicon.com).
  • Suche oder erstelle das gewünschte Symbol.
  • Klicke auf die Schaltfläche "Get Codes".
  • Kopiere den entsprechenden Code (z. B. HTML oder React).

2. Füge den Code zu deiner Website hinzu

  • Füge den kopierten Code in den HTML-Code deiner Seite ein.
  • Verwende den <script>-Tag, um die Lordicon-Bibliothek einzubinden.
  • Füge den <lord-icon>-Tag hinzu, um das Symbol zu rendern.

3. Passe das Symbol an (optional)

  • Attribute wie Größe, Farbe und Animation können über CSS angepasst werden.
  • Verwende die CSS-Klasse .lordicon mit dem Element-ID des Symbols (z. B. lordicon-123).

Beispiel-Code

<script src="https://cdn.lordicon.com/libs/lord-icon-2.1.0.js"></script>
<lord-icon
  src="https://cdn.lordicon.com/gmzxduks.json"
  id="lordicon-123"
  style="width: 100px; height: 100px"
  loop
  autoplay
></lord-icon>

Tipps für die Integration

  • Verwende für beste Leistung ein CDN (Content Delivery Network), um die Lordicon-Bibliothek zu hosten.
  • Verwende Inline-CSS für die Symbolanpassung, um den globalen Stylesheet nicht zu überladen.
  • Vermeide die Verwendung zu vieler animierter Symbole auf einer einzigen Seite, da dies zu Performanceproblemen führen kann.

So erstellen und bearbeiten Sie Lordicon-Symbole

Sobald du ein Lordicon-Konto erstellt hast, kannst du damit beginnen, deine eigenen animierten Symbole zu erstellen und zu bearbeiten. Folge diesen Schritten:

Ein neues Symbol erstellen

  1. Gehe zu "Symbole erstellen": Klicke in deinem Lordicon-Dashboard auf die Schaltfläche "Symbol erstellen".
  2. Wähle eine Vorlage oder beginne von vorne: Du kannst Lordicons Vorlagen durchsuchen oder dein eigenes SVG-Symbol hochladen, um damit zu beginnen.
  3. Symbol anpassen: Verwende die Bearbeitungstools, um Farbe, Größe, Stil und Animationen anzupassen.

Ein vorhandenes Symbol bearbeiten

  1. Gehe zu "Meine Symbole": Klicke in deinem Lordicon-Dashboard auf die Registerkarte "Meine Symbole".
  2. Finde das Symbol: Suche das Symbol, das du bearbeiten möchtest, entweder über die Suchleiste oder indem du durch die Liste scrollst.
  3. Klicke auf "Bearbeiten": Klicke auf das Stiftsymbol neben dem Symbol, um es zu bearbeiten.
  4. Vornehmen von Änderungen: Nimm die gewünschten Änderungen am Symbol vor, wie in Schritt 3 beschrieben.

Tipps für die Erstellung und Bearbeitung von Lordicon-Symbolen

  • Verwende einfache Formen: Komplexe Formen können bei der Animation zu Verzögerungen führen.
  • Beschränke die Animationen: Übermäßige Animationen können die Leistung deiner Website beeinträchtigen.
  • Optimiere deine Symbole: Komprimiere deine SVG-Dateien, um die Ladezeiten zu verkürzen.
  • Übe dich mit den Bearbeitungstools: Lordicon bietet eine Vielzahl von Optionen, daher ist es ratsam, mit den Einstellungen zu experimentieren, um das gewünschte Ergebnis zu erzielen.
  • Nutze die Lordicon-Community: In den Lordicon-Foren kannst du Fragen stellen und von anderen Designern lernen.

Häufig gestellte Fragen zu Lordicon

Was ist der Unterschied zwischen den verschiedenen Lizenzstufen?

Lordicon bietet drei Lizenzstufen an:

  • Kostenlos: Für nicht-kommerzielle Projekte mit weniger als 100.000 Seitenaufrufen pro Monat.
  • Pro: Für kommerzielle Projekte und unbegrenzte Seitenaufrufe mit erweiterten Funktionen wie der Erstellung und Bearbeitung von Symbolen.
  • Enterprise: Für Unternehmen mit benutzerdefinierten Lösungen, dediziertem Support und Massenlizenzierung.

Wie kann ich Lordicon in meine Website integrieren?

Es gibt zwei Möglichkeiten, Lordicon in deine Website zu integrieren:

  • Mit HTML und CSS: Verwende den bereitgestellten Code, um Symbole aus der Lordicon-Bibliothek einzubinden und anzupassen.
  • Mit WordPress-Plugin: Installiere das Lordicon WordPress-Plugin, um Symbole einfach per Drag-and-Drop in deine Beiträge und Seiten einzufügen.

Kann ich Lordicon-Symbole bearbeiten?

Ja, mit der Pro-Lizenz kannst du Lordicon-Symbole erstellen und bearbeiten. Du kannst:

  • SVG-Dateien importieren und in animierte Symbole umwandeln.
  • Symbolpfade, Farben und Animationen anpassen.
  • Eigene Symbole erstellen und in deine Lordicon-Bibliothek hochladen.

Gibt es Einschränkungen bei der Verwendung von Lordicon?

Je nach Lizenzstufe gibt es bestimmte Einschränkungen:

  • Kostenlos: Die Symbole dürfen nicht verkauft oder weiterverbreitet werden.
  • Pro: Die Symbole können nur für ein einziges Projekt verwendet werden.
  • Enterprise: Die Symbole können für mehrere Projekte verwendet werden, erfordern jedoch eine benutzerdefinierte Lizenzvereinbarung.

Preise und Tarife für Lordicon

Lordicon bietet sowohl kostenlose als auch Premium-Tarife an, um den Bedürfnissen verschiedener Nutzer gerecht zu werden.

Kostenloser Tarif

Der kostenlose Tarif von Lordicon ermöglicht dir die Nutzung einer begrenzten Anzahl von Symbolen und Funktionen. Du kannst auf über 500 kostenlose Symbole zugreifen, die du auf deiner Website oder in deinen Projekten verwenden kannst. Allerdings sind einige erweiterte Funktionen, wie z. B. die Möglichkeit, Symbole zu bearbeiten oder zu animieren, im kostenlosen Tarif nicht enthalten.

Premium-Tarif

Der Premium-Tarif von Lordicon bietet dir Zugriff auf die gesamte Sammlung von über 2.000 Symbolen sowie erweiterte Funktionen wie:

  • Symbolbearbeitung
  • Symbolanimation
  • Symbolerstellung
  • Prioritäts-Support

Es gibt drei verschiedene Premium-Pläne zur Auswahl:

Business-Tarif:

  • 99 US-Dollar pro Jahr
  • Zugang zu allen Symbolen und Funktionen
  • 5.000 API-Aufrufe pro Monat

Enterprise-Tarif:

  • Preis auf Anfrage
  • Zugriff auf alle Symbole und Funktionen
  • Unbegrenzte API-Aufrufe
  • Dedizierter Kundensupport

Welcher Tarif ist der richtige für dich?

Wenn du nur ein paar einfache Symbole für deine Website benötigst, ist der kostenlose Tarif möglicherweise ausreichend. Wenn du jedoch erweiterte Funktionen wie Symbolbearbeitung oder Animation benötigst, ist ein Premium-Tarif möglicherweise die bessere Wahl.

Zahlungsoptionen

Lordicon akzeptiert die folgenden Zahlungsoptionen:

  • Kreditkarten (Visa, Mastercard, American Express)
  • PayPal
  • Überweisung

Rückerstattungen

Lordicon bietet eine 30-tägige Geld-zurück-Garantie für alle Premium-Tarife. Wenn du mit dem Dienst nicht zufrieden bist, kannst du innerhalb von 30 Tagen nach dem Kauf eine Rückerstattung beantragen.

Alternativen zu Lordicon

Wenn Lordicon nicht das Richtige für dich ist, stehen dir zahlreiche Alternativen zur Verfügung, die dir dabei helfen, animierte Symbole in deine Websites und Projekte zu integrieren.

LottieFiles

LottieFiles ist eine Plattform, die eine Vielzahl animierter Symbole und Grafiken bietet. Ähnlich wie Lordicon kannst du diese Symbole problemlos in deine Websites einbetten und sie per HTML, CSS oder JavaScript steuern. LottieFiles bietet auch eine kostenlose Version mit eingeschränkten Funktionen an.

Animista

Animista ist eine Sammlung von kostenlosen animierten CSS-Symbolen, die du ohne externe Abhängigkeiten direkt in deine Websites integrieren kannst. Die Symbole sind leichtgewichtig und eignen sich hervorragend für einfache Animationen. Beachte jedoch, dass Animista keine benutzerdefinierten Symbolerstellungen unterstützt.

Iconify

Iconify ist eine Plattform, die Zugriff auf eine umfangreiche Bibliothek statischer und animierter Symbole bietet. Neben Lordicon bietet Iconify auch Integrationen für Vue, React, Angular und andere Front-End-Frameworks. Iconify stellt eine kostenlose Version mit eingeschränkten Funktionen zur Verfügung.

Weitere Alternativen

  • Airbnb Lottie: Eine Open-Source-Bibliothek für die Erstellung und Wiedergabe komplexer Animationen.
  • GreenSock Animation Platform (GSAP): Eine professionelle JavaScript-Bibliothek für die Erstellung komplexer und leistungsstarker Animationen.
  • Mo.js: Eine Open-Source-JavaScript-Bibliothek für die Erstellung einfacher bis komplexer Animationen.

Bei der Auswahl einer Alternative zu Lordicon solltest du Faktoren wie die Kosten, die Funktionsvielfalt, den Benutzerkomfort und die Integration mit deinen vorhandenen Technologien berücksichtigen. Die oben aufgeführten Alternativen bieten unterschiedliche Funktionen und Preisklassen, sodass du diejenige auswählen kannst, die deinen spezifischen Anforderungen am besten entspricht.

Weitere Beiträge

Folge uns

Neue Beiträge

Grafikdesign

Das ultimative Rucksack Symbol: Design, Verwendung und Inspiration für starke Marken

AUTOR • Jun 22, 2026
Technisches Zeichnen

Wellenende DIN 748: Maße, Toleranzen und Anwendung einfach erklärt

AUTOR • Jun 22, 2026
Technisches Zeichnen

Rollenkette Maße Tabelle: So findest du die richtige Kettengröße schnell und sicher

AUTOR • Jun 22, 2026
Design & Technik

Welle Passfeder: Funktion, Maße und die wichtigsten Fehler beim Einbau

AUTOR • Jun 22, 2026
Typografie

Musiknoten Unicode: So nutzt du Noten-Symbole richtig in Text, HTML und SEO

AUTOR • Jun 22, 2026
Technisches Zeichnen

Zeichensprache in technischen Plänen: Symbole schnell lesen und sicher verstehen

AUTOR • Jun 22, 2026
Design & Technik

Dateisymbole: Die visuellen Repräsentationen digitaler Dateien richtig verstehen und nutzen

AUTOR • Jun 22, 2026
Design-Tools & Software

Passfoto App kostenlos iPhone: Die besten Optionen für schnelle Passfotos ohne Fotostudio

AUTOR • Jun 22, 2026
Grafikdesign

Schluessel Icons: Unentbehrliche Symbole zum Entsperren visueller Kommunikation

AUTOR • Jun 22, 2026
Grafikdesign

Das Geheimnis des Burger-Menü-Icons: Design, Platzierung und mehr für mehr Klicks

AUTOR • Jun 22, 2026
Grafikdesign

Die Welt der Pantone Farben: Unverzichtbarer Leitfaden für Designer

AUTOR • Jun 22, 2026
Design & Technik

Polygoneffekt Kette: Was er ist, warum er wirkt und wie du ihn gezielt einsetzt

AUTOR • Jun 22, 2026
Technisches Zeichnen

Nietverbindungen: Arten, Vorteile und Einsatz im Überblick

AUTOR • Jun 22, 2026
Technisches Zeichnen

Maßstab Zeichnung richtig nutzen: So berechnest du jede Zeichnung schnell und sauber

AUTOR • Jun 22, 2026
Design & Technik

Fertigungsstruktur: So baust du eine skalierbare Produktion ohne Chaos

AUTOR • Jun 22, 2026
Typografie

Schöne Schriftzeichen für Tattoos: Die besten Zeichen, Stile und Ideen für klare Tattoo-Typografie

AUTOR • Jun 22, 2026
Technisches Zeichnen

Schnittdarstellung technische Zeichnung Beispiel: So liest und erstellt man sie richtig

AUTOR • Jun 22, 2026
Typografie

Alpha Zeichen zum Kopieren: So nutzt du das Symbol α schnell und richtig

AUTOR • Jun 22, 2026
Grafikdesign

Die Kunst des Icons: Guide zu Design und Implementierung erfolgreicher Icons

AUTOR • Jun 22, 2026
Grafikdesign

Die Bedeutung der EU-Symbole: Eine visuelle Sprache für ein vereintes Europa

AUTOR • Jun 22, 2026

Beliebte Beiträge

3D-Design

3D Modelle in 2D Zeichnungen umwandeln: Ein umfassender Leitfaden

AUTOR • Mar 09, 2026
Design & Technik

Kopieren und Einfügen von Symbolen: Der ultimative Leitfaden für Tastenkürzel und HTML-Entitäten

AUTOR • May 09, 2024
Grafikdesign

Das unverwechselbare Logo von Terraform: Bedeutung, Gestaltung und mehr

AUTOR • May 09, 2024
Grafikdesign

Smartphone-Symbole: Leitfaden zur Gestaltung und Verwendung wirkungsvoller Icons

AUTOR • Sep 23, 2024
Design & Technik

Verschleißmechanismen: Ein tiefgehender Blick auf Ursachen und Auswirkungen

AUTOR • Dec 09, 2024
Grafikdesign

Die Sprache der Icons: Wie Symbole unsere Kommunikation prägen

AUTOR • May 09, 2024
Design-Tools & Software

Erstelle mühelos benutzerdefinierte .ico-Dateien für Websites, Apps und mehr

AUTOR • May 09, 2024
Typografie

Eine Anleitung zum Kopieren japanischer Zahlen

AUTOR • Jun 13, 2025
Typografie

Die tiefere Bedeutung der japanischen Kalligrafie

AUTOR • Jun 13, 2025
Technisches Zeichnen

Alles Wissenswerte zur DIN 5418: Anwendung, Normen und Spezifikationen

AUTOR • Dec 09, 2024
Zeichentechniken

Sketchnotes-Symbole: Die visuelle Sprache zum Aufzeichnen und Erinnern

AUTOR • May 09, 2024
Design & Technik

Management-Symbole: Essentielle Werkzeuge für effektive Führung

AUTOR • May 09, 2024
Design & Technik

Das X-Icon: Eine umfassende Anleitung

AUTOR • May 09, 2024
Grafikdesign

Ikonische DJs: Die Meister des Turntables, die die Musikwelt prägten

AUTOR • May 09, 2024
Design & Technik

Das eBay-Icon: Ein visueller Leitfaden zur Markenidentität

AUTOR • May 09, 2024
Grafikdesign

Das visuelle Symbol der Datenerkenntnis: Datenbank-Icons

AUTOR • May 09, 2024
Design & Technik

Klebverbindungen: Antworten auf häufige Fragen und ihre spezifischen Vorteile

AUTOR • Dec 09, 2024
Technisches Zeichnen

Die Bedeutung der Montagevorspannkraft: Was Sie wissen müssen

AUTOR • Dec 09, 2024
Technisches Zeichnen

Oberflächenangaben in Zeichnungen: Alles, was Sie wissen müssen

AUTOR • Mar 25, 2026
Design & Technik

Das ultimative Handbuch zum Auswählen des perfekten Symbols

AUTOR • May 09, 2024