vinyl 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 vinyl Icon
Interactive UI controls guide users through digital experiences. The animated vinyl icon provides clear visual affordance for navbars, buttons, and settings panels. When users hover or tap this component, it triggers a responsive, hardware-accelerated movement that confirms the action is clickable. This reduces cognitive load and elevates the perceived premium quality of your web application. Ideal for dashboards, form pages, and transaction workflows.
React Component Code Examples
Basic Usage
<VinylIcon size={48} />Custom Props Configuration
<VinylIcon 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 vinyl icon available for commercial use?
Yes, this vinyl 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 vinyl 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.