Icons

Canonical icon names resolve to renderer-owned inline SVG. Names are strict identifiers: discovery keywords help find an icon but are not accepted as aliases.

For example, ^^search^^ renders a canonical SVG. Discovery keywords such as lookup are not accepted as aliases. Inline Icon syntax supplies the contextual class qp-inline-icon alongside qp-icon. Plain 🐦 remains ordinary text; ^^🐦^^ renders an Icon fallback wrapper with both classes.

A noncanonical Icon value is valid only when it is exactly one user-perceived Unicode grapheme, such as ?, ★, 🐦, a modified or joined emoji, or a flag. Unknown words and multi-grapheme strings fail validation instead of rendering as text. Registry descriptions document meaning; they never become automatic accessibility labels. Supply ariaLabel when an icon needs contextual accessible text.

Right-pointing arrow representing forward movement or continuation.

Discovery keywords: next, forward, continue

Inline usage: ^^arrow-right^^

Object usage: {"icon":{"name":"arrow-right"}}

Check mark representing completion, confirmation, or success.

Discovery keywords: complete, confirm, success

Inline usage: ^^check^^

Object usage: {"icon":{"name":"check"}}

Downward chevron representing expansion or a downward direction.

Discovery keywords: expand, down, disclosure

Inline usage: ^^chevron-down^^

Object usage: {"icon":{"name":"chevron-down"}}

Cross mark representing close, dismiss, or cancel actions.

Discovery keywords: dismiss, cancel, remove

Inline usage: ^^close^^

Object usage: {"icon":{"name":"close"}}

Check mark inside a circle representing completion, confirmation, inclusion, success, or availability.

Discovery keywords: check, complete, completed, confirmation, included, success, available, yes

Inline usage: ^^check-circle^^

Object usage: {"icon":{"name":"check-circle"}}

Minus mark inside a circle representing absence, removal, exclusion, unavailability, or a negative state.

Discovery keywords: minus, remove, removal, excluded, exclusion, unavailable, absent, no

Inline usage: ^^minus-circle^^

Object usage: {"icon":{"name":"minus-circle"}}

Adjustment sliders representing settings, configuration, customization, filtering, or controls.

Discovery keywords: sliders, settings, configuration, configure, customization, adjust, controls, filters

Inline usage: ^^sliders^^

Object usage: {"icon":{"name":"sliders"}}

Envelope representing email or written messages.

Discovery keywords: mail, message, contact

Inline usage: ^^email^^

Object usage: {"icon":{"name":"email"}}

Arrow leaving a box representing an external destination.

Discovery keywords: outbound, new-window, open

Inline usage: ^^external-link^^

Object usage: {"icon":{"name":"external-link"}}

Facebook brand glyph representing the Facebook social platform.

Discovery keywords: social, network, community

Inline usage: ^^facebook^^

Object usage: {"icon":{"name":"facebook"}}

Grid of tiles representing an icon collection or visual vocabulary.

Discovery keywords: glyphs, symbols, catalog

Inline usage: ^^icons^^

Object usage: {"icon":{"name":"icons"}}

Information mark in a circle representing contextual help or details.

Discovery keywords: information, help, details

Inline usage: ^^info^^

Object usage: {"icon":{"name":"info"}}

Instagram camera glyph representing the Instagram social platform.

Discovery keywords: social, photos, camera

Inline usage: ^^instagram^^

Object usage: {"icon":{"name":"instagram"}}

Interlocking chain links representing a hyperlink or connection.

Discovery keywords: url, connection, chain

Inline usage: ^^link^^

Object usage: {"icon":{"name":"link"}}

Three horizontal lines representing a menu or navigation list.

Discovery keywords: navigation, hamburger, list

Inline usage: ^^menu^^

Object usage: {"icon":{"name":"menu"}}

Magnifying glass representing search or find actions.

Discovery keywords: find, lookup, magnify

Inline usage: ^^search^^

Object usage: {"icon":{"name":"search"}}

Person silhouette representing a user, account, or profile.

Discovery keywords: person, account, profile

Inline usage: ^^user^^

Object usage: {"icon":{"name":"user"}}

Heart representing care, appreciation, favorites, affection, or support.

Discovery keywords: heart, love, care, favorite, favorites, appreciation, support, like

Inline usage: ^^heart^^

Object usage: {"icon":{"name":"heart"}}

Target representing goals, objectives, focus, precision, or intended outcomes.

Discovery keywords: target, goal, goals, objective, focus, precision, aim, outcome

Inline usage: ^^target^^

Object usage: {"icon":{"name":"target"}}

Compass representing direction, exploration, navigation, discovery, or guidance.

Discovery keywords: compass, direction, explore, exploration, navigation, navigate, discovery, guidance

Inline usage: ^^compass^^

Object usage: {"icon":{"name":"compass"}}

Exclamation mark in a triangle representing a warning or caution.

Discovery keywords: alert, caution, danger

Inline usage: ^^warning^^

Object usage: {"icon":{"name":"warning"}}

Briefcase representing business, professional work, or an organization.

Discovery keywords: business, work, professional, company, services

Inline usage: ^^briefcase^^

Object usage: {"icon":{"name":"briefcase"}}

Group of people representing a community, team, organization, or audience.

Discovery keywords: people, group, community, team, organization, audience

Inline usage: ^^users^^

Object usage: {"icon":{"name":"users"}}

Stacked layers representing structure, architecture, or composed systems.

Discovery keywords: structure, architecture, stack, system, composition

Inline usage: ^^layers^^

Object usage: {"icon":{"name":"layers"}}

Artist palette representing color, themes, or visual design.

Discovery keywords: color, theme, design, style, appearance

Inline usage: ^^palette^^

Object usage: {"icon":{"name":"palette"}}

Sparkles representing AI, creativity, enhancement, or something new.

Discovery keywords: ai, creative, magic, new, enhance, generate

Inline usage: ^^sparkles^^

Object usage: {"icon":{"name":"sparkles"}}

Overlapping tags representing categories, labels, taxonomy, or grouped metadata.

Discovery keywords: tag, tags, label, labels, category, categories, taxonomy, metadata

Inline usage: ^^tags^^

Object usage: {"icon":{"name":"tags"}}

Circular speech bubble representing conversation, feedback, comments, or communication.

Discovery keywords: message, conversation, chat, feedback, comment, comments, communication, discussion

Inline usage: ^^message-circle^^

Object usage: {"icon":{"name":"message-circle"}}

Document with text representing written content, documentation, or a text file.

Discovery keywords: document, content, docs, text, file, page

Inline usage: ^^file-text^^

Object usage: {"icon":{"name":"file-text"}}

Document with code representing source code, configuration, schema, or a structured file.

Discovery keywords: code, source, config, configuration, schema, json, file, development

Inline usage: ^^file-code^^

Object usage: {"icon":{"name":"file-code"}}

Globe representing the web, worldwide access, or a public website.

Discovery keywords: web, world, website, internet, public, global

Inline usage: ^^globe^^

Object usage: {"icon":{"name":"globe"}}

Pair of braces representing a structured object, code, or authored data contract.

Discovery keywords: object, code, structured-data, contract, json, syntax

Inline usage: ^^braces^^

Object usage: {"icon":{"name":"braces"}}