How to make Moving Icons animate on click instead of hover?

You can control animations programmatically by binding the `animate` prop to a state variable triggered on click events. For example, set `animate` to true on click and false on release, similar to the advanced usage example for hover in the README.

Are Moving Icons accessible for users with motion sensitivities?

The README doesn't address accessibility, so developers must manually handle reduced motion preferences, such as using CSS media queries or conditionally disabling animations. Adding ARIA labels is also recommended for screen readers.

Can I use Moving Icons in a SvelteKit project?

Yes, the README states compatibility with SvelteKit, and icons can be imported as named components. Installation via npm or the shadcn-svelte registry works seamlessly in SvelteKit environments.

Moving Icons vs Lucide: which is better for Svelte animations?

Moving Icons is built on Lucide but adds hand-crafted animations optimized for Svelte 5, while Lucide provides static icons. Choose Moving Icons for out-of-the-box animations; use Lucide directly if you need static icons or framework-agnostic solutions.

How to customize animation speed or easing in Moving Icons?

The README doesn't support direct animation customization; you'd need to override CSS styles manually or wrap icons in custom components. This limits fine-tuning compared to libraries with built-in animation props.

Is there a way to add new icons to the Moving Icons library?

The project welcomes contributions, as per the README, so you can submit new icons via GitHub. However, it relies on Lucide as a base, so additions might need alignment with that library's design.

Open-Awesome

moving icons

MITSvelte

A collection of 500+ hand-crafted, animated Lucide icons built natively for Svelte 5 with zero dependencies.

Visit Website GitHub

409 stars8 forks0 contributors

What is moving icons?

Moving Icons is a library of animated SVG icons built specifically for Svelte 5 applications. It provides 500+ hand-crafted Lucide icons with built-in animations that can be triggered on hover or programmatically. The library solves the problem of adding engaging, interactive iconography to Svelte projects without compromising performance or bundle size.

Target Audience

Svelte developers building modern web applications who want to enhance their user interfaces with animated icons. This is particularly valuable for developers creating dashboards, navigation systems, or any interface where visual feedback improves user experience.

Value Proposition

Developers choose Moving Icons because it offers Svelte-native animated icons with zero dependencies, full customization options, and tree-shaking capabilities. Unlike generic icon libraries, it's specifically optimized for Svelte 5 and provides interaction-ready animations out of the box.

Overview

beautifully crafted, moving icons. for svelte. 🧡

Use Cases

Best For

Adding animated icons to SvelteKit applications
Building interactive navigation menus with hover effects
Creating engaging dashboard interfaces with animated indicators
Enhancing button and form interactions with visual feedback
Developing design systems with consistent animated iconography
Improving user experience in Svelte applications with subtle animations

Not Ideal For

Projects using frameworks other than Svelte (e.g., React, Vue)
Applications requiring static icons without animations for performance or simplicity
Teams needing built-in accessibility features like reduced motion support (not mentioned in README)
Environments where icon animations must trigger on events other than hover or programmatic control

Pros & Cons

Pros

Svelte 5 Native

Built specifically for Svelte 5 with full compatibility, ensuring optimal performance and seamless integration, as highlighted in the README.

Zero Dependencies

Lightweight implementation with no external dependencies, reducing bundle size and improving loading speed, a key feature emphasized in the description.

Hand-Crafted Animations

500+ icons feature carefully designed motions that activate on hover or programmatically, providing subtle visual feedback to enhance user experience.

Fully Customizable

Control size, color, stroke width, and animation state through props, allowing easy adaptation to different design systems without extra CSS.

Cons

Limited Framework Support

Only compatible with Svelte 5, making it unsuitable for projects using other frameworks or older Svelte versions, which restricts its utility in diverse tech stacks.

No Accessibility Guidance

The README lacks mention of accessibility features, such as ARIA attributes or reduced motion handling, posing a risk for inclusive design without manual implementation.

Work in Progress

Admitted as a work in progress in the notes, which could lead to incomplete features, potential bugs, or breaking changes during updates.

Frequently Asked Questions

Related Projects

lucide

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

Stars22,608

Forks1,367

Last commit2 days ago

unplugin-icons

🤹 Access thousands of icons as components on-demand universally.

Stars4,859

Forks158

Last commit4 months ago

ssgoi

animated page transition for major ssr frameworks and browsers, including Safari

Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome

Stars506

Forks24

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub