Free Star Rating Generator

Generate copy-paste star rating SVGs in any color, size, and rating. Half-stars supported. Perfect for product pages, reviews, and emails.

Rating

Rating

Out of

Size (px)

Gap (px)

Fill color

Empty color

Preview

SVG markup

<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="4.5 out of 5 stars" viewBox="0 0 128 24" width="128" height="24">
  <defs>
    <clipPath id="sr-clip">
      <rect x="0" y="0" width="115.2" height="24"/>
    </clipPath>
  </defs>
  <g fill="#e5e7eb"><path transform="translate(0, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(26, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(52, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(78, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(104, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/></g>
  <g fill="#facc15" clip-path="url(#sr-clip)"><path transform="translate(0, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(26, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(52, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(78, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/><path transform="translate(104, 0) scale(1)" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/></g>
</svg>

Paste the SVG anywhere in your HTML. Currentcolor-friendly — adjust the fill props if you need theme-aware rendering.

Star Ratings That Just Work

Stars are the universal shorthand for trust online. They’re the first thing the eye lands on in a search result, a product card, or a review. But hand-coding star SVGs is fiddly — getting half-stars, the right gold tone, and crisp rendering across email clients is surprisingly hard.

Use this generator to build the visual — and back it up by actually being reachable. Eloqra puts a lightweight live chat on your site that answers from your Telegram, free while we’re in early access.

One-Line Install

Add live chat to your site with a single script tag — no build step, no backend, no iframe. The chat bubble is live in about 30 seconds.

Answered from Telegram

Every visitor message is forwarded to the Telegram you already check. Reply from your phone and it lands back on your site instantly.

Full Visitor Context

Each message arrives with the page, device, browser, and country attached, so you reply already knowing who is asking.

Free in Early Access

The full live chat experience is free while we're in early access — no credit card required. Setup takes 30 seconds.

Ready to Talk to Your Visitors?

Eloqra puts a lightweight live chat on your site and sends every visitor message to your Telegram. Reply from your phone — free while in early access.

Start Free

Who Uses Star Ratings?

Anyone selling anything online.

E-commerce Stores

Drop stars on product cards, landing pages, and PDP hero sections.

Email Marketers

Embed inline SVG stars that render in Gmail, Outlook, and Apple Mail.

Web Designers

Get pixel-clean star markup that scales on any background.

Marketers

Show ratings on landing pages without pulling in heavy widgets.

Bloggers & Reviewers

Mark up review posts with consistent, branded star visuals.

App Marketers

Match App Store / Play Store ratings on your marketing site.

Developers

Skip the icon library — copy SVG and ship it.

Founders

Add social proof to a landing page in 30 seconds, no design needed.

Frequently Asked Questions

Why use SVG stars instead of an icon font?

SVG is sharper at any size, accessible to screen readers, and renders consistently across browsers and email clients. Icon fonts can fail in dark mode or email and aren’t always WCAG-friendly.

Do these stars work in email?

Inline SVGs work in Apple Mail, iOS Mail, and most modern clients. Outlook desktop has limited SVG support — for emails sent to Outlook-heavy audiences, prefer a PNG fallback.

Can I show half-stars?

Yes. The generator supports ratings in 0.5 increments using SVG clipPath, so a 4.5-star rating displays a true half-filled fifth star.

Are the generated SVGs accessible?

The output includes role=“img” and an aria-label describing the rating (e.g., “4.5 out of 5 stars”). Screen readers announce the rating to users.

Can I customize the color?

Yes — pick any hex color. For maximum compatibility with WCAG contrast on white backgrounds, classic gold (#facc15 or #f59e0b) is recommended.

Do these come with schema markup?

Not by default — SVG is a visual element. Pair this with our Review Schema Generator to get the matching JSON-LD that earns Google rich results.

More Free Tools from Eloqra

Free, no-signup tools to help you collect, measure, and show off your customer love.

Review Schema Generator

Generate Product / Review / AggregateRating JSON-LD for SEO.

Trust Badge Generator

Build SVG trust badges showing reviews, ratings, or customer counts.

Review Response Templates

Reply to 5★, neutral, and negative reviews with ready-to-use templates.

NPS Calculator

Measure customer loyalty with the industry-standard Net Promoter Score.