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 Fokussymbol: Bedeutung, Verwendung und beste Praktiken für mehr Konzentration

AUTOR • Jul 13, 2026
Grafikdesign

Die perfekte Farbkombination: Harmonische Farben für Blau im Design, Outfit und Interior

AUTOR • Jul 13, 2026
Grafikdesign

Icons für effektive Kommunikation durch visuelle Symbolik: So machst du Inhalte sofort verständlich

AUTOR • Jul 12, 2026
Design & Technik

Auto Icons: Das visuelle Vokabular der Automobilbranche verstehen und gezielt einsetzen

AUTOR • Jul 12, 2026
Grafikdesign

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

AUTOR • Jul 12, 2026
Design & Technik

Die Magie hinter dem Disney Plus Logo: Symbol für Unterhaltung und Kindheitserinnerungen

AUTOR • Jul 12, 2026
Design & Technik

Die Evolution von Symbolen: Von Hieroglyphen zu Emojis – wie Zeichen unsere Kommunikation geprägt haben

AUTOR • Jul 12, 2026
Design & Technik

Roeckl Icon elegante Handschuhe für den modernen Lifestyle: Stil, Funktion und Kaufberatung

AUTOR • Jul 12, 2026
Design & Technik

Das offizielle MongoDB Symbol: Geschichte, Bedeutung und Verwendung verständlich erklärt

AUTOR • Jul 12, 2026
Grafikdesign

Album Cover: So erstellst du ein starkes Cover, das Klicks und Streams holt

AUTOR • Jul 11, 2026
Design & Technik

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

AUTOR • Jul 11, 2026
Design & Technik

Icon Modus: Verwandeln Sie Ihr iPhone in ein minimalistisches Meisterwerk

AUTOR • Jul 11, 2026
Design & Technik

Die Bedeutung des ISO-Werts für erstklassige Fotografie: So kontrollierst du Bildqualität in jeder Lichtsituation

AUTOR • Jul 09, 2026
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

Beliebte Beiträge

Grafikdesign

Apple Music Icons: Bedeutung und praktische Verwendung erklärt

AUTOR • Jun 13, 2025
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
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

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

AUTOR • May 09, 2024
Design & Technik

Lordicon: Animierte Icons für Ihre Websites und Projekte

AUTOR • May 09, 2024
Grafikdesign

Entdecken Sie die visuelle Kraft des Power BI-Logos: Ein markantes Symbol für Datenerleuchtung

AUTOR • May 09, 2024
Grafikdesign

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

AUTOR • May 10, 2026
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
Technisches Zeichnen

Airflow-Symbole: Eine umfassende Anleitung

AUTOR • May 09, 2024
Design & Technik

Kubernetes-Symbol: Leitfaden für Design, Verwendung und Anpassung

AUTOR • May 09, 2024
Technisches Zeichnen

Zahnrad Norm: Ein umfassender Leitfaden für Konstrukteure und Ingenieure

AUTOR • Mar 09, 2026
Design-Tools & Software

Entfessle die Macht mit Star Wars SVG-Dateien für deine Kreationen

AUTOR • May 09, 2024
Technisches Zeichnen

Der Lötspalt: Alles, was Sie wissen müssen

AUTOR • Apr 23, 2026
Technisches Zeichnen

Technische Zeichnung Symbole: Bedeutung und Interpretation

AUTOR • Mar 25, 2026
Grafikdesign

Die stille Sprache der Symbole: Die Kraft der heiligen Icons

AUTOR • May 09, 2024
Design & Technik

Beratungs-Icons: Die visuelle Sprache professioneller Dienstleistungen

AUTOR • May 09, 2024
Design & Technik

Icons herunterladen: Eine Anleitung zum Erhalten hochwertiger Symbole

AUTOR • May 09, 2024