Premium Feature Icons: Accessible Labels, States, and Component Rules

A premium icon is a supporting cue. It cannot explain the plan, the price, the entitlement, or the action on its own.

The safest default is an icon paired with the visible word “Premium” at the first important point of discovery. Once the convention is established within a compact repeated interface, an icon-only variant may be acceptable if it still has an accessible name and a nearby route to the explanation.

Separate the meanings

Interfaces often collapse several states into one symbol:

• the feature belongs to a paid plan;
• the current person does not have access;
• the person has access but lacks permission for this resource;
• the feature is unavailable because of a quota;
• the feature is disabled for another operational reason.

These states need different copy. A premium badge describes the commercial category. It does not prove that the current user is free, and it must not replace server authorization.

For example:

State	Label	Action
Paid capability, free user	“Premium”	Explain plan and offer upgrade
Paid capability, subscribed user	Optional or hidden badge	Open feature
Usage limit reached	“10 of 10 used”	Explain reset and paid allowance
Missing resource permission	“View only”	Explain role or request access
Temporary outage	“Unavailable”	Explain status and retry

Choose an icon for the product’s vocabulary

There is no universal evidence that a lock, crown, sparkle, or arrow produces better commercial results. Each carries possible associations, but context, labels, and audience determine what people understand.

Lock

A lock is widely associated with security and restricted access. That can be clear for a protected feature, but it can also suggest privacy, encryption, or a disabled control. Use a text label when the intended meaning is “paid plan.”

Crown

A crown may fit a plan literally named Premium, Pro, or Royal. It can also imply rank or status. Avoid it when the product does not use status language elsewhere.

Sparkles

Sparkles are often used for AI, automation, or a new enhancement. If the product already uses them for AI, reusing them for payment creates ambiguity.

Upward arrow

An upward arrow inside a circle can suggest an upgrade without suggesting security. It still needs a label because it may also be understood as upload, share, or move upward.

Choose one primary premium symbol across the product. Document other reserved icon meanings so a future AI, security, or upload feature does not reuse it.

Pair the cue with explicit language

At the first gated control or in a pricing comparison, write “Premium,” the plan name, or the exact requirement. A tooltip is supplementary because it may not be available on touch, keyboard, or assistive-technology paths.

Useful patterns:

Export SVG  [Premium]
Brand kit   [Pro]
10 of 10 AI generations used

Avoid:

Export SVG  [unlabelled lock]
Unlock magic
Upgrade for more

The first version tells the person what is unavailable and why. The second asks them to infer both.

Meet the accessibility boundary

WCAG 2.2 Use of Color requires another visual means when colour conveys information. Non-text Contrast covers the contrast of visual information needed to identify controls and states.

For a premium indicator:

• do not rely on gold, blue, or any other colour alone;
• give an informative icon an accessible name or pair it with visible text;
• hide a decorative duplicate icon from assistive technology;
• maintain contrast in default, hover, focus, disabled, and high-contrast states;
• keep the clickable target on the parent control large enough for the task;
• preserve a visible focus indicator;
• do not expose the same label twice to a screen reader.

If the icon sits inside a button already named “Upgrade to Premium,” it is decorative and should usually use aria-hidden="true". If the icon is the only content, it needs an accessible name, though visible text remains preferable for an unfamiliar commercial symbol.

Keep the badge separate from the gate

A badge should describe. A feature gate should decide what to render. An event handler may intercept a gated action and show an upgrade explanation. The protected server operation must enforce entitlement again.

The shared BY Group badge currently uses Lucide’s CircleArrowUp:

<PremiumBadge tooltip="Premium feature" />

It supports small and medium sizes and provides an accessible label on the icon. The shared FeatureGate separately selects accessible or fallback content, while useFeatureGate opens a product-owned upgrade modal.

This separation prevents visual changes from modifying authorization logic. It also allows a product to replace the icon without rewriting checkout or entitlement code.

Place the indicator where the decision occurs

Common placements include:

• beside a feature name in navigation or settings;
• inside a button label for a gated action;
• in a pricing comparison;
• beside a quota or export option;
• in an upgrade explanation.

Do not scatter badges across every screen. Repetition can make the free experience feel like an advertisement and makes the important gate harder to notice. Mark the decision point and provide one coherent explanation.

If a free person can preview a paid result, distinguish “Preview” from “Premium export.” If the control is unavailable, explain why instead of using a disabled button with no reachable description.

Test meaning, not preference

An icon preference poll does not show whether people can complete the task. Use small comprehension and usability checks:

1. Show the interface without explaining the icon.
2. Ask what the label and action mean.
3. Ask what the person expects after activation.
4. Test with keyboard, touch, zoom, and a screen reader.
5. Verify subscribed and free states against the server entitlement.

In production, measure the full path from feature discovery to entitlement activation. Do not interpret badge clicks alone as success. A confusing symbol may attract curiosity while reducing qualified checkout completion.

Component checklist

Before releasing a premium indicator:

• one symbol has one documented meaning;
• the first occurrence has visible text;
• colour is not the only cue;
• the accessible name is present exactly once;
• tooltip content is also available without hover;
• free, paid, quota, permission, and outage states are distinct;
• the parent control has a visible focus state and usable target;
• the gate and protected server action verify entitlement independently;
• the prompt names the feature, plan, price context, next action, and dismiss route.

Icon choice is a design-system decision, not a psychological shortcut. Consistency, explicit language, and correct entitlement behaviour do more work than a claim that one symbol universally “converts.”

Sources and implementation references

• W3C: Use of Color
• W3C: Non-text Contrast
• W3C: Target Size Minimum
• BY Group PremiumBadge component
• BY Group feature-gate components