Free React Animated Icon - React Component
Interactive Live Preview
Hover the icon to see the interactive animation in action.
Asset Metadata
Installation & Setup
Follow these steps to integrate the animated asset into your application.
Quick Setup with shadcn CLI
The CLI method requires shadcn/ui to be initialized in your project. It will handle all imports automatically.
About the brand react Icon
Integrating brand assets into clean, modern user interfaces requires pixel-perfect vector representation. Our animated brand react logo component brings native interaction to your social authentication pages, share menus, and footer credits. Built with lightweight SVG paths and React Motion, this animated brand icon transitions smoothly on cursor hover, providing delightful micro-interactions for your users. It strictly complies with official brand guidelines while offering developers the flexibility to adjust scale, stroke styles, and hover behaviors.
React Component Code Examples
Basic Usage
<BrandReactIcon size={48} />Custom Props Configuration
<BrandReactIcon color="#5A67F2" strokeWidth={1.5} />Customization Options & API
- size: Number (pixels) or string (e.g., "2rem")
- color: Any valid CSS color hex, rgb, or tailwind class if passed through SVG
- strokeWidth: Number between 0.5 and 3
- className: Tailwind classes for positioning and margins
Frequently Asked Questions
Is this brand react icon available for commercial use?
Yes, this brand react icon is 100% open-source under the MIT license, meaning you can use it in both personal and commercial projects without attribution.
How does the animation work for this React icon?
The animation is powered by Motion (formerly Framer Motion) for React. It triggers smooth, hardware-accelerated animations on hover, click, or tap.
Can I customize the color and size of the animated brand react icon?
Yes, the component accepts standard React props such as 'size' (number), 'color' (string hex/rgb), and 'strokeWidth' (number) for full customization.
Documentation & Assets
Read more about our motion engine and component customization.
Enterprise Customization
Our animated icons are built to be highly extensible. By copying the source code, you gain full control over the `transition` objects and `animate` props, allowing you to fine-tune the interactions to match your application's unique motion signature.
Need a custom icon set?
Our design team can craft bespoke animated assets for your enterprise brand guide.