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

Design-Tools & Software

Word Hintergrundbild einfügen: So machst du dein Dokument sofort professioneller

AUTOR • Jul 08, 2026
Design & Technik

Technische Produktdokumentation aufbauen: So schaffe ich ein System, das wirklich genutzt wird

AUTOR • Jul 07, 2026
Design & Technik

Matt seidenmatt Unterschied: Was wirklich besser ist für Wände, Möbel und Lack

AUTOR • Jul 06, 2026
Grafikdesign

Das perfekte Blog-Icon: So heben Sie sich von der Masse ab

AUTOR • Jul 06, 2026
Technisches Zeichnen

Dreieck Zeichen eingeben: Bedeutung, Tastatur‑Kurzbefehle und praktische Tipps

AUTOR • Jul 05, 2026
Design & Technik

Kostenlose Icons finde und verwende sie für deine Projekte: so sparst du Zeit und Geld

AUTOR • Jul 05, 2026
Grafikdesign

Kamera Logos: Kraftvolle visuelle Identität für Fotografie Marken

AUTOR • Jul 05, 2026
Grafikdesign

Tischsymbol: Ein Leitfaden für Designer und Anwender

AUTOR • Jul 05, 2026
Grafikdesign

Das Tischsymbol als praktisches Hilfsmittel für digitale Kommunikation und Design

AUTOR • Jul 05, 2026
Grafikdesign

Color Puce: Bedeutung, Wirkung und die besten Einsatzmöglichkeiten für den Farbton

AUTOR • Jul 05, 2026
Design & Technik

Aisthesis Definition: Bedeutung, Herkunft und Beispiele einfach erklärt

AUTOR • Jul 04, 2026
Design & Technik

Pulverbeschichtung Farben: So wähle ich die perfekte Farbe für mein Projekt

AUTOR • Jul 04, 2026
Design & Technik

Ring Symbol Bedeutung, Verwendung und Best Practices für das Webdesign

AUTOR • Jul 04, 2026
Design & Technik

Punktlast vs. Umfangslast: So wählst du die richtige Lastverteilung

AUTOR • Jul 04, 2026
Grafikdesign

ICON plc: Ein Überblick über das führende CRO im klinischen Forschungsmarkt

AUTOR • Jul 04, 2026
Design & Technik

Das unverzichtbare Symbol für modernes Laden: Die Wallbox Ikone

AUTOR • Jul 04, 2026
Design & Technik

Kettenantrieb Übersetzung berechnen: So findest du das richtige Verhältnis schnell und sauber

AUTOR • Jul 04, 2026
Technisches Zeichnen

Technische Zeichnung Symbole Erklärung: Die wichtigsten Zeichen einfach verstehen

AUTOR • Jul 03, 2026
Grafikdesign

Die Macht des Datums: Symbole und deren Bedeutung richtig verstehen

AUTOR • Jul 03, 2026
Grafikdesign

Die Porsche Ikone: Ein Symbol für Luxus, Leistung und Zeitlosigkeit

AUTOR • Jul 03, 2026

Beliebte Beiträge

Design & Technik

Die Bedeutung des ISO-Werts für erstklassige Fotografie

AUTOR • May 01, 2024
Design & Technik

ROECKL ICON: Elegante Handschuhe für den modernen Lifestyle

AUTOR • May 09, 2024
Design & Technik

Das offizielle MongoDB-Symbol: Geschichte, Bedeutung und Verwendung

AUTOR • May 09, 2024
Design & Technik

Die Evolution von Symbolen: Von Hieroglyphen zu Emojis

AUTOR • May 09, 2024
Design & Technik

Auto-Icons: Das visuelle Vokabular der Automobilbranche

AUTOR • May 09, 2024
Design-Tools & Software

Shortcut Icons erklärt: Tastenkombinationen mit Symboleinsatz

AUTOR • Jun 13, 2025
Technisches Zeichnen

Toleranzangaben in Technischen Zeichnungen: Beispiele und Anwendungen

AUTOR • Apr 23, 2026
Grafikdesign

Die perfekte Farbkombination: Harmonische Farben für Blau

AUTOR • Apr 27, 2024
Design & Technik

Icon-Modus: Verwandeln Sie Ihr iPhone in ein minimalistisches Meisterwerk

AUTOR • May 09, 2024
Design & Technik

Karten-Icons: Die ultimative Anleitung zur Auswahl, Gestaltung und Verwendung

AUTOR • May 09, 2024
Grafikdesign

Rätselikon: Ein unentbehrliches Symbol für Problemlösung und Spaß

AUTOR • May 09, 2024
Grafikdesign

Icons: Effektive Kommunikation durch visuelle Symbolik

AUTOR • May 09, 2024
Grafikdesign

Die Symbolwelt von Icon 5: Eintauchen in die faszinierende Welt der Symbole

AUTOR • May 09, 2024
Grafikdesign

Die Bedeutung von Albumcovern: Kunst, die Musik visuell verkörpert

AUTOR • Jul 29, 2025
Design & Technik

Emojis: Die Sprache der Emotionen in der digitalen Welt

AUTOR • May 09, 2024
Grafikdesign

Grafana Icon: Bedeutung, Verwendung und Anpassung

AUTOR • May 09, 2024
Grafikdesign

Der perfekte Briefkopf: Gestaltung und Tipps für Ihren Umschlag

AUTOR • May 10, 2026
Grafikdesign

Apple Music Icons: Bedeutung und praktische Verwendung erklärt

AUTOR • Jun 13, 2025
Technisches Zeichnen

DIN 323: Was Sie über diese Norm wissen sollten

AUTOR • May 06, 2026
3D-Design

3D-Symbole: Die Dimension der Tiefe für fesselnde Designs

AUTOR • May 09, 2024