• Icons
  • Docs
  • Lordicon
  • Lordicon
  • Pricing
  • More
  • Log in Sign up
SVG placeholder before animation
  • Foundations
  • Icon styles
  • Animation
  • Formats
  • Best practices
  • Integrations
  • Web
  • React
  • Flutter
  • WordPress
  • Webflow
  • Other
  • Tools
  • Figma
  • Canva
  • Adobe
  • Presentations
  • Support
  • Licenses
  • Account and Billing
  • Library
  • Troubleshooting

Multiple triggers and animations for a single icon

At Lordicon, we prioritize achieving the best page loading speed. We begin by displaying an SVG placeholder, followed by a heavier Lottie player loading. When the user interacts (hovers or clicks), the SVG is replaced by an animation. This process has helped us achieve an outstanding score of 98/100 on Google Page Speed Insights. You can verify this by visiting this URL.

We've created a custom element for our users that supports the use of a placeholder (e.g., an SVG file) before the animation is loaded. It can also be configured to delay the loading of the animation until it's actually needed, such as upon user interaction. We've provided a series of examples (docs / web / loading-placeholder + loading-lazy) that demonstrate the possibilities.

Loading (placeholder)

Display a small SVG placeholder until the custom element is ready.

Show
Loading (placeholder + interaction)

Display a small SVG placeholder until the first user interaction with the element.

Show
Loading (lazy)

Learn how to load icons only when needed.

Show
Loading (lazy + effect)

Load icons only when needed and create a smooth, simultaneous fade-in effect after the load completes.

Show

Please note that the configuration involves both HTML and CSS.

Visit web docs for more insights

Was this article helpful?

Sorry to hear that. How can we improve this article?

Thanks for your feedback!