# SVG components

> Enhance your apps with 5 SVG React components, ideal for scalable vector graphics in Tailwind CSS and Next.js projects.

62 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/svg.

- [Background Beams](https://21st.dev/@manuarora700/components/background-beams.md) — by Manu Arora
- [Flickering Grid](https://21st.dev/@dillionverma/components/flickering-grid.md) — by Dillion Verma
- [Animated Grid Pattern](https://21st.dev/@dillionverma/components/animated-grid-pattern.md) — by Dillion Verma
- [Animated Gradient With SVG](https://21st.dev/@danielpetho/components/animated-gradient-with-svg.md) — by Daniel Petho
- [Grid Pattern](https://21st.dev/@dillionverma/components/grid-pattern.md) — by Dillion Verma
- [Svg follow scroll](https://21st.dev/@reuno-ui/components/svg-follow-scroll.md) — by reuno-ui
- [Icons](https://21st.dev/@shadcn/components/icons.md) — by shadcn
- [Floating paths](https://21st.dev/@bundui/components/floating-paths.md) — by Shadcn UI Kit
- [Dot Pattern](https://21st.dev/@dillionverma/components/dot-pattern.md) — by Dillion Verma
- [Clip-Path Image](https://21st.dev/@uilayout.contact/components/clip-path-image.md) — by UI Layouts
- [Shader Svg](https://21st.dev/@reuno-ui/components/shader-svg.md) — by reuno-ui
- [Spinning Sphere](https://21st.dev/@lyanchouss/components/spinning-sphere.md) — by Liana Pepanyan
- [Dot Pattern](https://21st.dev/@designali-in/components/dot-pattern.md) — by Ali Imam
- [Icons](https://21st.dev/@Codehagen/components/icons.md) — by Prism UI
- [iPhone 15 Pro](https://21st.dev/@dillionverma/components/iphone-15-pro.md) — by Dillion Verma
- [Button](https://21st.dev/@shugar/components/button-1/shapes.md) — by tigran tumasov
- [Boxy App Icons](https://21st.dev/@muhammad-binsalman/components/boxy-app-icons.md) — by M.bin Salman
- [Background Shapes](https://21st.dev/@uicapsule/components/background-shapes.md) — by UI Capsule
- [Grid Pattern](https://21st.dev/@designali-in/components/grid-pattern.md) — by Ali Imam
- [SVG Path Drawing Text Animation](https://21st.dev/@minhxthanh/components/svg-path-drawing-text-animation.md) — by Le Thanh
- [Glyphs](https://21st.dev/@airbnb-visx/components/glyphs.md) — by Airbnb
- [LoadingBottle](https://21st.dev/@ruhith369/components/loading-bottle.md) — by ruhith
- [deer-logo](https://21st.dev/@kedhareswer.12110626/components/deer-logo.md) — by Kedhareswer Naidu
- [Fluid Particle](https://21st.dev/@designali-in/components/fluid-particle.md) — by Ali Imam
- [Marquee Along SVG Path](https://21st.dev/@danielpetho/components/marquee-along-svg-path.md) — by Daniel Petho
- [Image Masking](https://21st.dev/@uilayout.contact/components/image-masking.md) — by UI Layouts
- [Draw Random Underline](https://21st.dev/@osmosupply/components/draw-random-underline.md) — by osmosupply
- [useElasticLineEvents](https://21st.dev/@danielpetho/components/use-elastic-line-events.md) — by Daniel Petho
- [Worm Loader](https://21st.dev/@ruixen.ui/components/worm-loader.md) — by Ruixen UI
- [Animated SVG Text Path](https://21st.dev/@easemize/components/animated-svg-text-path.md) — by Hossain Jahed
- [Ruixen Gradient Footer](https://21st.dev/@ruixen.ui/components/ruixen-gradient-footer.md) — by Ruixen UI
- [Patterns](https://21st.dev/@airbnb-visx/components/patterns.md) — by Airbnb
- [7 segment number](https://21st.dev/@jakapatb/components/7-segment-number.md) — by Jakkapat Boonroj
- [Path morphing](https://21st.dev/@itsankitverma/components/path-morphing.md) — by Ankit Verma
- [Spinning Arc Logo with Gradient Text](https://21st.dev/@minhxthanh/components/spinning-arc-logo-with-gradient-text-1.md) — by Le Thanh
- [Marquee Along SVG Path](https://21st.dev/@danielpetho/components/marquee-along-svg-path/marquee-along-svg-path-mapping.md) — by Daniel Petho
- [Dendrogram](https://21st.dev/@airbnb-visx/components/dendrogram.md) — by Airbnb
- [Animated Signature](https://21st.dev/@dqnamo/components/signature.md) — by dqnamo
- [Svg Text](https://21st.dev/@sean0205/components/svg-text.md) — by Sean Hello
- [Figma Vector Editor](https://21st.dev/@arlanoska/components/vector-editor.md) — by Arlan
- [Logo Trace Loader](https://21st.dev/@dqnamo/components/logo-trace-loader.md) — by dqnamo
- [Light Theme Icon](https://21st.dev/@campsite/components/light-theme.md) — by Campsite
- [SVG Text Draw](https://21st.dev/@animbits/components/text-svg-text-draw.md) — by Animbits
- [Infinity Loop](https://21st.dev/@loading-ui/components/infinity.md) — by Loading UI
- [Text Along Path](https://21st.dev/@danielpetho/components/text-along-path/auto.md) — by Daniel Petho
- [Text Along Path](https://21st.dev/@danielpetho/components/text-along-path.md) — by Daniel Petho
- [Analog Clock Component](https://21st.dev/@uniquesonu/components/analog-clock-component.md) — by Sonu
- [SVG Clip Path Mask](https://21st.dev/@reuno-ui/components/svg-clip-path-mask.md) — by reuno-ui
- [Network](https://21st.dev/@airbnb-visx/components/network.md) — by Airbnb
- [Corporate Clip Path Gallery](https://21st.dev/@uilayout.contact/components/corporate-clippath.md) — by UI Layouts
- [Mobius Loop Icon](https://21st.dev/@ncdai/components/mobius-loop-icon.md) — by Chánh Đại
- [Text Along Path](https://21st.dev/@danielpetho/components/text-along-path/scroll.md) — by Daniel Petho
- [Text Along Path](https://21st.dev/@danielpetho/components/text-along-path/circle.md) — by Daniel Petho
- [Curves](https://21st.dev/@airbnb-visx/components/curves.md) — by Airbnb
- [Discord Icon](https://21st.dev/@sshahaider/components/discord-icon.md) — by Efferd
- [Line Draw SVG](https://21st.dev/@pulkitxm/components/line-draw-svg.md) — by Pulkit
- [Dash Ring](https://21st.dev/@loading-ui/components/dash-ring.md) — by Loading UI
- [Google Icon](https://21st.dev/@sshahaider/components/google-icon.md) — by Efferd
- [Facebook Icon](https://21st.dev/@sshahaider/components/facebook-icon.md) — by Efferd
- [Chart Background](https://21st.dev/@LegionWebDev/components/background.md) — by Legion Dev

Full component directory: https://21st.dev/llms.txt