Glyph: Animated SVG Icon Set

Glyph brings your navigation to life. Hover the home, folder, heart, bell or user icon and each plays its own crafted SVG animation. A bonus folder widget opens to reveal three stacked cards (dark, green and a white analytics card with a speedometer gauge) that pop out and cycle on click.

Five bespoke icon animations

Each icon is a separate React component with its own Framer Motion choreography, driven by a simple hover prop so you can trigger it from any parent.

A folder full of data

The folder widget stacks a dark card, a green card and a dashboard card with gauge, growth pills and metrics; click to pop cards out or refresh the score.

Features

• ✓Animated Home, Folder, Heart, Bell and User SVG icons
• ✓Hover-triggered Framer Motion animations
• ✓Each icon is an independent component with an isHovered style prop
• ✓Interactive folder widget with stacked cards
• ✓Speedometer gauge with gradient arc
• ✓Growth and metric pills
• ✓Click to pop out or cycle cards
• ✓No icon library needed: pure inline SVG

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

• App navigation and tab bars
• Dashboard widgets
• Landing-page feature sections
• Design-system icon sets

From download to production

1. Download Glyph: Animated SVG Icon Set from your account and unzip it.
2. Run npm install, then npm run dev to open it locally.
3. Swap in your brand colours, copy and data (see the README customisation guide).
4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.