SVG tools.
Rasterize, convert, edit and encode SVG files.
Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.
Set up MCPEvery svg tools
- SVG to PNG converterDrop an SVG and get a PNG at its own size or at any size up to 1024 pixels, drawn fresh from the vector.
- SVG to JPG converterDrop an SVG and get a JPG at any size up to 1024 pixels, with the background color you choose behind the transparent parts.
- SVG to WebP converterDrop an SVG and get a WebP at any size up to 1024 pixels, transparency kept, at the quality you choose.
- SVG to ICO converterDrop an SVG and get an ICO with every favicon size drawn fresh from the vector, 16 to 256 pixels, transparency kept.
- SVG to Base64 encoderPaste SVG markup or drop a file and read its Base64, plain or as a data URI, with the size before and after.
- SVG to data URI converterPaste SVG markup or drop a file and get a data URI, URL-encoded so it stays small and readable, or Base64, wrapped for CSS or an img tag.
- SVG editorPaste or drop an SVG and edit its source beside a live preview, with helpers for size, fill, stroke, background and minifying.
- SVG to PNG at 1× to 4×Drop an SVG and export it as a PNG at 1×, 2×, 3× or 4× its drawn size, for retina screens, drawn fresh from the vector each time.
- SVG noise filterDrop an SVG and get a PNG with grain over it: four kinds of noise, any intensity, grayscale if you like, a new pattern on request.
- Add grain to an SVGVector art can look too clean.
- Distressed SVG effectNew designs can look too pristine.
- SVG texture overlayFlat vector art lacks the feel of a surface.
- SVG to PNG with grainConverting to PNG anyway? Drop the SVG and get the PNG with grain already on it, at any size up to 1024 pixels, transparency kept.
- Vector grain generatorDrop any SVG, icon, logo or illustration, and get a PNG with grain over it in the mode and strength you choose.
- SVG color replacerDrop an SVG, click a color, pick its replacement, and download a PNG with everything else as it was.
- Change an SVG logo's colorNeed the logo in white, or in a client's color? Drop the SVG, pick the color to change and its replacement, and download the PNG.
- Edit SVG fill and stroke colorsSVG colors live in fill and stroke attributes buried in the markup.
- Recolor SVG iconsDrop an icon from any library, pick its color and your brand's, and download the PNG.
- SVG color picker and editorDon't know the hex? Drop the SVG and click the color you want changed; pick the replacement and see the result at once.
- SVG theme color changerBuilding light and dark modes? Drop one SVG, swap its dark colors for light ones, and download the other theme's PNG.
- SVG color tone changerDrop an SVG and shift every color toward one tone, sepia to slate to a brand hue, with the shading kept.
- Badge and emblem color stylingBadges, crests and certification marks need variants.
- SVG illustration toningTurn a colorful vector illustration into a single-tone version in your brand's color, with its shading kept.
- SVG to styled PNGNeed the SVG as a PNG in a particular mood? Drop it, pick the tone, download the styled PNG: conversion and styling in one go.
- Unify icon set colorsIcons from different sources in different colors? Tone them all to one and they read as a set designed together.
- Vector art mood effectsChange how your vector art feels: warm and inviting, cool and professional, vintage and nostalgic, from one SVG.
- SVG opacity changerDrop an SVG and get a PNG at the opacity you set, or with a fade, the transparency baked into the pixels.
- Design system icon opacityExport an icon at the opacity levels your design system defines, disabled, hover, decorative, and keep every icon consistent.
- Icon transparency generatorMake disabled, ghost and decorative versions of an SVG icon at the opacity you choose, consistent across the set.
- Logo watermark from SVGTurn a vector logo into a watermark: drawn sharp at any size, at the transparency you choose, as a PNG for photos and documents.
- SVG decorative background makerTurn a bold SVG into a whisper-quiet background: the vector at a few percent opacity, as a transparent PNG for pages and screens.
- Vector fade effect converterGive an SVG a linear or radial fade and export it as a transparent PNG, sharp where it shows and dissolving where it doesn't.
- SVG transparency creatorDrop an SVG and clear its background color into a transparent PNG; for an SVG that stays an SVG, the editor deletes the background rect.
- SVG background removerDesign tools add background rects on export.
- Remove a white background from an SVGA white background in an SVG is a white rect from the export or a bitmap inside it.
- Remove a color from an SVGNeed a color gone from an SVG? Drop it, pick the color and clear it into transparency as a PNG, or change the fill in the source.
- Make an SVG logo transparentLogos exported from design tools often carry a background.
- SVG to transparent PNG converterDrop an SVG and get a PNG with the transparency kept, and any background color cleared, for the places that refuse SVG.
- Transparent SVG makerSVGs are transparent until a tool adds a background.
Pricing
Build it with Pro
The tools are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds the product around them.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Production-ready React sections: hero, pricing, features, dashboards and more.
- Complete multi-page sites you can ship as they are.
- React icons from every major library, installable with one command.
- Presets that restyle every block, in light and dark.
- Lets your AI editor search, preview and install blocks for you.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Basic usage
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: High usage
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Pro blocks: 6,000+ blocks
- Templates: All 14 templates
- React icons: 294k+ icons
- Themes: All 59 themes
- MCP server: Unlimited usage
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
- Complete multi-page sites you can ship as they are.Templates: All 14 templates
- React icons from every major library, installable with one command.React icons: 294k+ icons
- Presets that restyle every block, in light and dark.Themes: All 59 themes
- Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Lets your AI editor search, preview and install blocks for you.MCP server: High usage
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
Build the product around them
Every block, template and icon, installed by your AI agent in your theme. The tools stay free.
Get Pro
Cancel anytimeKeep what you've shipped if you cancel