Icon Studio

Animated icons, made yours. Customize, export, or install in your project.

3OMAR.HS / DESIGN LIBRARY

Little icons. Big personality.

263 animated originals. Pick a shape, tune every detail, and take it anywhere.

SVG REPO / 500,000+ ICONS AT SOURCE

Find it. Bring it. Make it yours.

Browse the full SVG Repo catalogue on its website. Download an SVG, then import it here to customize and export. The catalogue is external; icons are not mirrored here.

Import & edit an SVG

Files stay in your browser. Check the icon’s individual license at SVG Repo; keep any required attribution. Static SVGs only. License guide ↗

Choose SVG · up to 2 MB Or paste SVG markup Source page · optional Creator / license / attribution · optional

Width · px Height · proportional— Rotation · degrees Padding · % Color Apply color to all shapes Background Transparent Flip horizontally Flip vertically

Individual shape

FillStroke

Import an SVG to begin.

Export format

Original colors are preserved until you choose a color override. Width and height scale together. JPEG uses the selected background. Source and credit are embedded in SVG metadata; download the attribution file for raster exports.

FOR YOUR NEXT PROJECT

From here to your app.

Real components. Ready to import.

In a shadcn-vue project, add this icon and its dependency:

1. Install dependency

npm install motion-v

2. Copy the component

3. Add shared types

components/types/types.ts

Usage

Icon artwork and animation: itshover-vue / iloomilo, based on itshover. Apache 2.0 · Notices. Editor and exports adapted by 3omar.hs.