Lordicon
  • Icons
  • Docs
  • Resources
  • Pricing
Log in Sign up Log in
Multiple triggers and animations for a single icon
  • Foundations
  • Icon styles
  • Animation
  • Formats
  • Best practices
  • Integrations
  • Web
  • React
  • Flutter
  • Other
  • Plugins
  • WordPress
  • Figma
  • Google Docs & Slides
  • 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.

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.

Visit web docs for more insights

Was this article helpful?

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

Thanks for your feedback!