Skip to main content
Back to all tools

Icon & Logo Generator

Create custom icons and logos with shapes, gradients, built-in icons, and text. Export as SVG or PNG.

135°
200px
50%
html
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="icon-gradient" x1="85.35533905932738%" y1="14.644660940672622%" x2="14.64466094067263%" y2="85.35533905932738%">
  <stop offset="0%" stop-color="#24292f" />
  <stop offset="100%" stop-color="#24292f" />
</linearGradient>
  </defs>
  <g fill="url(#icon-gradient)">
    <rect x="44" y="44" width="112" height="112" rx="20.16" />
  </g>
  <g transform="translate(50, 50) scale(4.166666666666667)" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" /></g>
</svg>

Frequently Asked Questions

What file format should I use for a favicon?

Modern browsers support SVG favicons (best for scalability), but .ico files offer universal compatibility. For maximum coverage, provide both: a 32×32 .ico fallback and an SVG favicon via <link rel='icon' type='image/svg+xml'>. Tip: SVG favicons can respond to prefers-color-scheme for automatic light/dark mode adaptation.

What sizes do I need for app icons?

For web apps: 192×192 and 512×512 PNG for the web manifest. For Apple devices: 180×180 apple-touch-icon. For Windows tiles: 150×150 and 310×310. Using an SVG source and generating all sizes programmatically ensures consistency. Tip: always include a solid background color on app icons — transparent backgrounds look broken on some platforms.

How do I create an SVG icon with rounded corners?

Use the rx and ry attributes on <rect> elements. You can also apply a clip-path with rounded corners to the entire SVG. This generator lets you adjust corner radius interactively. Tip: for circle icons, set rx to half the width; for a soft square (app-icon style), use about 22% of the width.

What is the best practice for emoji or text-based logos?

Place a <text> element centered inside the SVG with a web-safe fallback font. Set font-weight to bold and use a contrasting color against the background. Tip: single characters or emoji work at small sizes, but avoid multi-word text — it becomes unreadable at 16×16 favicon size.

How do I use the generated icon in my Next.js or React project?

Download the SVG and place it in your /public folder as favicon.svg, then reference it in your <head> or metadata. For Next.js App Router, you can export an icon.tsx that returns an ImageResponse — this generator's SVG code can serve as inspiration for the JSX shape. Tip: also generate an apple-icon.tsx for Apple devices.