Search Animated Icon for React

Download the Search icon

The Search icon is one file in the ExodeUI icon library. It starts from the open-source Lucide search shape and adds spring motion plus hover and press states. You get the packaged .bexode file for your components and the editable .exode file for ExodeUI, so you can change the timing, size or colour without redrawing the vector.

Using the Search icon in React and Next.js

Run the command above in a React or Next.js project to add the Search icon. Open the file in ExodeUI when you need to change its states or motion; the packaged version keeps the same behaviour when you ship it. The same .exode file also works with the Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter runtimes.

Related animated icons

• Heart icon
• House icon
• Settings icon
• User icon
• Bell icon
• Star icon
• Check icon
• CircleCheck icon

Frequently asked questions

Is the Search animated icon free?

Yes. You can preview the Search icon and copy its install command without paying. The icon starts from the open-source Lucide set, which is released under the ISC licence, and ExodeUI also has a free Community plan.

How do I use the Search icon in React or Next.js?

Run npx exode add icon search in your project, then open the downloaded .exode file in ExodeUI to inspect or edit its states. The icon ships as a small .bexode file so it can be embedded in a React component.

Does the Search icon work outside React?

The same .exode file works with the other ExodeUI runtimes, including Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.

Can I animate my own SVG instead?

Yes. The free SVG animator lets you paste an SVG, choose spring motion and a trigger, and export a .bexode file or React component. You can also edit the result in ExodeUI.

More from ExodeUI