Choosing the Right Icon for Premium Features: A Research-Backed Guide to Locks, Crowns, Sparkles, and Arrows

Every freemium product faces the same design question: how do you visually communicate “this feature requires a paid plan” without making free users feel excluded? The icon you choose carries psychological weight far beyond its pixel dimensions. A lock says “you can’t have this.” A crown says “you’re not special enough.” A sparkle says… well, nobody is sure what sparkles mean anymore.

This guide analyses the four psychological frames behind premium icons, examines what major SaaS products actually use (and why), and provides concrete guidance on choosing and implementing the right indicator for your product. It covers the research, the accessibility requirements, and the common mistakes that cost conversions.## Table of Contents

1. Why the Icon Matters More Than You Think
2. The Four Psychological Frames
3. What Major Products Use (and Why)
4. Deep Dive: Each Icon Option
5. The “Text Badge” Alternative
6. Accessibility Requirements
7. Implementation Specification
8. Common Mistakes
9. Decision Framework
10. References## Why the Icon Matters More Than You Think

A premium feature indicator does two things simultaneously:

1. It sets expectations: the user knows before clicking that an upgrade prompt will appear
2. It frames the value proposition: the icon’s psychological associations colour how the user perceives the premium offering

These two functions can work together or against each other. A lock icon sets expectations clearly (everyone knows what a lock means), but it frames the value as restriction — what you can’t have — rather than growth — what you could gain. This framing difference measurably affects conversion rates.

Research from The Audiencers (Lars Jensen’s study on premium content indicators) found that lock icons are “very excluding” and “do not signal the added value of quality.” Users who see a lock assume they can’t access the feature and never click. This short-circuits the conversion funnel at its widest point — the place where the most users could potentially be captured.

The goal of a premium icon is not to block users. It’s to create curiosity about what upgrading would unlock, while honestly signalling that an upgrade is involved. The best icon accomplishes both.## The Four Psychological Frames

Every premium icon communicates a psychological message about what “premium” means. Icons fall into one of four frames:

Frame	Common Icons	Message	Emotional Response
Restriction	Lock, padlock, shield-lock	”You can’t have this”	Negative — users disengage, feel excluded
Status	Crown, diamond, star	”You’re special / VIP”	Clear recognition, but can feel elitist
Enhancement	Sparkles, wand, magic	”This is magical / better”	Positive but ambiguous — what does it mean?
Growth	Arrow-up, bolt, zap, rocket	”Level up / get more”	Action-oriented, forward momentum

Restriction Frame

The restriction frame is the most common default. It’s intuitive — a lock communicates “locked” — but it anchors the user’s mindset on what they can’t do rather than what they could gain.

Restriction framing works in security contexts (SSL indicators, private data, encryption), where the lock communicates protection. But for premium features, it communicates punishment for not paying.

Status Frame

The status frame (crowns, diamonds) communicates exclusivity. It works well for consumer products with a clear aspirational identity — gaming, social media, luxury subscriptions. Users understand immediately that a crown means “this costs money.”

The risk is feeling elitist or out of touch, especially for B2B tools where users want utility, not status symbols.

Enhancement Frame

The enhancement frame (sparkles, wand) communicates that something is better, shinier, or more capable. It feels positive and aspirational without the elitism of status framing.

The problem is ambiguity. Sparkles, in particular, have become one of the most overloaded icons in modern interface design. More on this below.

Growth Frame

The growth frame (arrows, bolts) communicates forward momentum and progress. It implies action — “upgrade” literally means “go up” — and pairs naturally with CTA verbs like “unlock,” “level up,” and “get more.”

This frame is the most compatible with freemium positioning, where the message should be “you’re getting a great free product, and premium makes it even better.”## What Major Products Use (and Why)

Examining what successful SaaS products actually ship reveals a split across all four frames — with a notable trend away from restriction:

Product	Icon	Frame	Notes
Canva	Crown	Status	Consistent across the entire product. Used on premium templates, fonts, and elements.
HubSpot	Circle arrow-up	Growth	Upgrade indicator next to gated features in the CRM.
GitHub Copilot	Sparkles	Enhancement	Used specifically for AI features, not general premium.
Spotify	Sparkles	Enhancement	AI-only (Smart Shuffle). Upgrade prompts use copy, not icons.
Medium	Star	Value	Switched FROM a lock to a star in 2017. Explicit, deliberate rejection of restriction frame.
ClickUp	Text badge	Direct	Labels features with the plan name (“Business”, “Enterprise”). No icon at all.
Slack	None	Discovery	Shows contextual banners when users hit limits. No persistent badge.
Notion	Custom character	Brand	Moved AWAY from sparkles to a bespoke illustrated face.
Grammarly	Numbered badge	Direct	Shows count of premium-only writing suggestions found.
Helsingin Sanomat	Diamond	Value	Finnish newspaper using “this is precious” framing for premium journalism.
Scandinavian publishers	None	Hidden	Premium labels shown only to subscribers, not to free users.

The Medium Pivot

Medium’s 2017 switch from lock to star is particularly instructive. They found that the lock icon was actively discouraging readers from clicking on premium articles. The lock communicated “this is not for you” rather than “this is worth paying for.” After switching to a star, engagement with premium content increased — users were more willing to click, encounter the paywall, and consider subscribing.

The Slack/Notion Approach

Both Slack and Notion avoid persistent premium indicators entirely. Instead, they show upgrade prompts contextually — when a user hits a message search limit (Slack) or attempts a premium action (Notion). This “discovery-first” approach means users learn about premium features organically rather than through constant visual reminders.

This approach works for products with strong network effects and high daily engagement. For products where users visit less frequently, persistent indicators are more appropriate because users need reminders of what premium offers.## Deep Dive: Each Icon Option

Lock — Restriction Frame

The case for it:

• Universally understood
• Zero ambiguity
• Highest recognition rate for “this costs money”
• Appropriate for security-related contexts

The case against it:

• The Audiencers research (Lars Jensen): “very excluding” and “does not signal the added value of quality.” The lock “has a risk of creating a negative connotation by closing the gate in front of a potential subscriber.”
• Users see the lock, assume they can’t access the feature, and never click. The funnel dies at its widest point.
• Creates a dark pattern risk when previously free features are relocked behind premium.

Use when: The context is literally about security (SSL, encryption, private data). Never for feature gating.

Crown — Status Frame

The case for it:

• Unambiguous and proven at scale (Canva uses it across millions of design assets)
• Highest recognition rate specifically for “premium tier” (not just “costs money”)
• Strong visual presence at small sizes

The case against it:

• Feels elitist and old-fashioned for B2B tools
• Implies a hierarchy of users (royalty vs. commoners) that can feel condescending
• Works better for consumer products with clear free/paid binary

Use when: Your product is consumer-facing, has a strong brand identity, and the premium tier is aspirational (design tools, creative platforms, gaming).

Sparkles — Enhancement Frame

The case for it:

• Feels positive, modern, and aspirational
• Widely adopted across the industry
• Strong association with “new” and “special”

The case against it:

• NNGroup study (n=107): sparkles now mean at least 5 different things. Only 16.82% of participants associated them with “special content.” Zero participants spontaneously associated sparkles with AI despite widespread adoption for AI features.
• Notion deliberately moved away from sparkles because the icon had become meaningless.
• If your product already uses sparkles for AI features (as many do), reusing them for “premium” creates ambiguity: does the sparkle mean “this uses AI” or “this costs money”?

Use when: You have NO other meaning for sparkles in your product, AND you want a “magical/enhanced” feeling rather than a clear “premium” signal.

Diamond/Gem — Value Frame

The case for it:

• Strong value association (“this is precious/rare”)
• Feels premium without the elitism of a crown
• Distinct from other common icon uses

The case against it:

• Less universally recognized as “premium feature” — could be confused with gamification (achievements, rewards)
• Cultural associations vary (luxury in some contexts, gaming in others)

Use when: Your product has a value-oriented brand (quality journalism, curated content) rather than a utility-oriented brand.

CircleArrowUp / Arrow-Up — Growth Frame

The case for it:

• Action-oriented: implies what to DO (“upgrade”) rather than what you CAN’T do (“locked”)
• Not overloaded with other meanings (unlike sparkles)
• Matches freemium positioning (“you get more, not you’re locked out”)
• Validated at scale by HubSpot
• The circle container (if using CircleArrowUp) gives visual weight as a small badge — reads as a self-contained indicator, not a directional arrow

The case against it:

• Without the circle container, a bare arrow-up can be mistaken for a sort control
• Lower instant recognition than crown or lock — users need one exposure to learn what it means
• Less “premium feeling” than crown or diamond

Use when: Your product is B2B SaaS, utility-focused, and you want the premium indicator to feel like an invitation to grow rather than a status marker.## The “Text Badge” Alternative

There’s a fifth option that isn’t strictly an icon: a text badge like “Pro”, “Premium”, or the plan name.

Advantages:

• Highest clarity. Zero ambiguity. Universally understood. Screen-reader friendly without additional aria-label.
• Supports multiple tiers naturally: “Pro”, “Business”, “Enterprise”
• No cultural or psychological baggage

Disadvantages:

• Takes more horizontal space than a single icon (matters for inline placement next to buttons and menu items)
• Needs translation for international products
• Feels less polished than a well-designed icon badge

Recommended badge height: 16px pill shape with a subtle background colour. Can be combined with an icon for maximum clarity: [arrow-up Pro].

Use when: You have multiple paid tiers and need to differentiate between them, OR when your user research shows that icon-only badges cause confusion.## Accessibility Requirements

Whatever icon you choose, it must meet WCAG 2.1 AA requirements. Premium indicators are functional (they communicate information), not decorative, so they require:

Requirement	Implementation	WCAG Criterion
Text alternative	aria-label="Premium feature" on the icon element	1.1.1 Non-text Content
Not colour-only	Icon shape must convey meaning independent of colour	1.4.1 Use of Color
Non-text contrast	3:1 minimum contrast ratio for the icon against its background	1.4.11 Non-text Contrast
Keyboard-accessible tooltip	If using a tooltip, it must be accessible via keyboard focus (not hover-only)	2.1.1 Keyboard
Consistent identification	The same icon must be used everywhere premium is indicated	3.2.4 Consistent Identification
Meaningful screen reader text	”Premium feature” or “Upgrade required” — NOT “Circle arrow up icon”	1.1.1 Non-text Content

Screen Reader Patterns

The aria-label should communicate the meaning, not the visual appearance:

<!-- Bad: describes the icon visually -->
<svg aria-label="Circle with arrow pointing up">...</svg>

<!-- Good: communicates the meaning -->
<svg aria-label="Premium feature">...</svg>

<!-- Best: communicates meaning AND action -->
<svg aria-label="Premium feature — upgrade required">...</svg>

When the premium icon is adjacent to text that already says “Premium” (e.g., a “Premium” heading), the icon should be decorative:

<h3>
  Premium Features
  <svg aria-hidden="true">...</svg>
  <!-- Decorative — text already conveys meaning -->
</h3>

Colour Contrast

The icon’s colour must maintain a 3:1 contrast ratio against its immediate background (WCAG 1.4.11). For icons placed inside a tinted circle (e.g., bg-primary/10), check the contrast of the icon colour against the tinted background, not the page background.

For light theme with a blue primary (#6074cb):

• Icon on white background: 4.0:1 — passes
• Icon on bg-primary/10: depends on the exact tint — test with a contrast checker

For dark theme:

• Re-check all contrast ratios; blue-on-dark-grey may fail## Implementation Specification

Recommended: CircleArrowUp with Two Size Variants

For B2B SaaS products using a freemium model, the recommended icon is CircleArrowUp (or equivalent in your icon library) with two size variants:

Small (Inline) — 14px

For placement next to text labels, inside buttons, or in menu items:

// React + lucide-react example
import { CircleArrowUp } from "lucide-react";

function PremiumBadge() {
  return (
    <span className="inline-flex">
      <CircleArrowUp
        className="h-3.5 w-3.5 text-primary"
        aria-label="Premium feature"
      />
    </span>
  );
}

Usage:

<Button onClick={handleAIGenerate}>
  AI Generate <PremiumBadge />
</Button>

<MenuItem>
  Custom branding <PremiumBadge />
</MenuItem>

Medium (Badge) — 16px in 20px circle

For placement in cards, feature lists, or as a standalone indicator:

function PremiumBadge({ size = "sm" }) {
  if (size === "md") {
    return (
      <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary/10">
        <CircleArrowUp
          className="h-4 w-4 text-primary"
          aria-label="Premium feature"
        />
      </span>
    );
  }

  return (
    <span className="inline-flex">
      <CircleArrowUp
        className="h-3.5 w-3.5 text-primary"
        aria-label="Premium feature"
      />
    </span>
  );
}

Visual Design Rules

1. Colour: Use your product’s primary colour for the icon. This creates a visual association between the brand and premium features.
2. Placement: Always to the right of the feature label, never to the left (left-positioned icons are typically read as “category” or “type” indicators, not status indicators).
3. Vertical alignment: Centre-align with the adjacent text baseline.
4. Spacing: 4px gap between the label text and the icon.
5. Never animate: A premium indicator is a static status marker, not an attention-grabbing animation. Animations create visual noise and are an accessibility concern (WCAG 2.3.1).

Tooltip

Add a tooltip for first-time users who haven’t learned what the icon means. Use a proper tooltip component (Radix Tooltip, not a native title attribute) to ensure keyboard accessibility:

import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";

<Tooltip>
  <TooltipTrigger asChild>
    <PremiumBadge />
  </TooltipTrigger>
  <TooltipContent>Premium feature</TooltipContent>
</Tooltip>;

Common Mistakes

1. Lock Icons on Visible Content

Users see the lock, assume they can’t access the feature, and never click. Conversions are higher when users discover value first, then encounter the upgrade prompt. The lock kills curiosity.

2. Overusing Sparkles

Adding “premium” as a sixth meaning to an already overloaded icon. If your product uses sparkles for AI features, effects, new content, deals, or loading states, sparkles cannot also mean “premium.”

3. Inconsistent Indicators

Mixing different premium icons across the same product — a crown here, a lock there, a sparkle somewhere else. WCAG 2.1 SC 3.2.4 (Consistent Identification) requires that components with the same function are identified consistently. But beyond compliance, inconsistency confuses users about what each icon means.

4. Pre-Labelling Before Engagement

Some research suggests that hiding premium labels entirely from non-subscribers leads to higher conversion rates. Users who engage with content first, then hit a paywall, convert at higher rates than users who see the label and never click. However, this approach risks feeling deceptive. The right balance is showing the indicator but making it subtle — a small badge, not a large overlay.

5. Using Colour Alone

Never rely solely on colour to convey premium status. A gold tint or a coloured border fails WCAG 1.4.1 (Use of Color) and is invisible to colourblind users. Always combine colour with an icon or text label.

6. Badges That Look Like Buttons

A static premium badge must be visually distinct from interactive elements. If the badge looks clickable, users will click it expecting something to happen — and nothing will (or worse, the wrong thing will happen). Use the icon library’s standard icon treatment, not a button-like pill with hover states.

7. Different Icons for Different Features

Every premium feature should use the same icon. The indicator communicates “this requires an upgrade,” not “this is an AI feature” or “this is a customisation feature.” Feature differentiation is the job of the feature label, not the premium badge.## Decision Framework

Use this table to choose the right icon for your product:

Your Product Is…	Recommended Icon	Frame	Why
B2B SaaS tool (CRM, analytics, compliance)	CircleArrowUp	Growth	Utility-focused users want action, not status symbols
Consumer creative tool (design, video, music)	Crown	Status	Aspirational identity is part of the value proposition
AI-first product (single AI feature is premium)	Sparkles	Enhancement	But ONLY if sparkles aren’t used for other meanings
Publisher / content platform	Star or Diamond	Value	Communicates content quality, not access restriction
Multi-tier product (Pro, Business, Enterprise)	Text badge (“Pro”)	Direct	Need to differentiate which tier, not just “premium”
Product with high daily engagement (messaging, notes)	None	Discovery	Show upgrade prompts contextually, not persistently

If You’re Still Unsure

Default to CircleArrowUp (growth frame). It’s the safest choice for most SaaS products:

• It isn’t overloaded with other meanings
• It implies action (“go up”) rather than restriction (“locked out”)
• It works at small sizes (the circle container gives visual weight)
• It’s available in every major icon library (Lucide, Heroicons, Feather, Phosphor)
• It’s been validated at scale by HubSpot

The crown is a strong second choice if your product is consumer-facing. Avoid locks and sparkles unless you have a specific, well-researched reason.## References

• The Audiencers — Rethink Your Premium Icons (Lars Jensen) — Research on lock icons discouraging engagement with paywalled content
• Nielsen Norman Group — The Proliferation and Problem of the Sparkles Icon — Study (n=107) showing sparkles have 5+ meanings, low association with any single concept
• Appcues — How Freemium SaaS Products Convert Users with Brilliant Upgrade Prompts — Analysis of upgrade flows in Slack, Spotify, Dropbox, and other major products
• Aguayo — UX in Freemium Products — Framework for freemium UX design
• Spaceberry Studio — UX Design for Paywalls and Subscription Models — Paywall design patterns and conversion psychology
• SetProduct — Badge UI Design — Badge component design patterns and sizing
• Smashing Magazine — Badges vs Pills vs Chips vs Tags — Taxonomy of small UI indicators
• The A11Y Collective — Improving Icon Usability and Accessibility — Icon accessibility best practices
• W3C WAI — Use Icons that Help the User — WAI supplemental guidance on functional icon requirements