• Icons
  • Docs
  • Lordicon
  • Lordicon
  • Pricing
  • More
  • Log in Sign up
Multiple triggers and animations for a single icon
  • 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

In order to enable multiple triggers and animations for a single icon, you need to utilize JavaScript code or create your own trigger.

Examples attached below explain how to do that.

State

Explore the use of icon state animations.

Show
Custom trigger (states)

This example demonstrates complex usage of states with a custom trigger. See how the trash icon appears, fills, and erases as the user interacts.

Show
Visit web docs for more insights

Was this article helpful?

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

Thanks for your feedback!