Free Star Rating Generator

Generate copy-paste star rating SVGs in any color, size, and rating. Half-stars supported. Perfect for product pages, testimonials, 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 testimonial. 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; then use ShowTrust to back it with real reviews. Real customers, real stars, real embed — all free while we’re in early access.

Hosted Submission Form

Give customers a clean, branded page to leave testimonials in seconds. No login required for them, full control for you.

Embeddable Wall of Love

Drop a single snippet on your site and show off authentic reviews. Auto-updates as new testimonials come in.

Authentic Social Proof

Real testimonials from real customers — no AI-generated fakes, no stock quotes. Build trust the right way.

Free in Early Access

Collect unlimited testimonials and embed your wall of love for free while we're in early access. Sign up takes 30 seconds.

Ready to Collect Real Testimonials?

ShowTrust gives you a hosted submission page and an embeddable wall of love. Authentic social proof in minutes — 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 ShowTrust

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.

Quote Card Image Generator

Turn any testimonial into a shareable PNG quote card for social.

NPS Calculator

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