Icons

Icons come from the @bookklik/senangstart-icons package — 246 inline SVGs exposed on SXR.icons. Widgets reference them by slug string, for example icon="cog-6-tooth".

SXR.icons['check']  // '<svg …>…</svg>'

Unknown slugs render a ? fallback glyph instead of failing, so a typo degrades gracefully rather than breaking the widget.

Using icons in widgets

<a-sxr-icon-button icon="star"></a-sxr-icon-button>
<a-sxr-icon-label-button icon="sparkles" value="Generate"></a-sxr-icon-label-button>

icon-active swaps the icon in the pressed state:

<a-sxr-icon-button icon="play" icon-active="pause"></a-sxr-icon-button>

Icon helpers

SXR.getIconSvg(icon, color?, thickness?)

Returns the SVG string with every currentColor replaced by color, and optionally stroke-width set to thickness. Returns '' for an unknown slug.

SXR.getIconSvg('star', '#2563EB')          // blue star SVG
SXR.getIconSvg('star', '#2563EB', '1.5')   // with a custom stroke width

SXR.getIconDataUrl(icon, color?, thickness?)

Same, but returns a data:image/svg+xml URL usable directly as an image src or a canvas texture source.

const url = SXR.getIconDataUrl('play', '#F1F5F9')
new Image().src = url

SXR.createIconEntity(options) / SXR.redrawIconEntity(entity, options)

Build and repaint an A-Frame entity that renders an icon on a canvas plane — the same pipeline the icon widgets use. See SXR Namespace.

The full icon set

All 246 slugs, grouped for browsing. Copy one directly into an icon attribute. The authoritative list is Object.keys(SXR.icons) at runtime — the icon package may add slugs in future releases.

Arrows (29)

arrow-left arrow-right arrow-up arrow-down arrow-long-leftarrow-long-right arrow-long-up arrow-long-down arrow-patharrow-rotate-cw arrow-rotate-ccw rotate-add rotate-minusarrow-top-right-on-square arrow-right-on-rectanglearrow-left-on-rectangle chevron-left chevron-right chevron-upchevron-down chevron-double-left chevron-double-rightchevron-double-up chevron-double-down arrow-left-arrow-rightarrow-up-arrow-down arrow-left-right arrow-up-downarrow-up-down-left-right

Media (17)

play pause stop play-circle pause-circle stop-circle speaker-wavespeaker-x-mark microphone microphone-mute video-camera camera photopanorama musical-note carousel reel

Communication (16)

envelope envelope-open chat-bubble-left chat-bubble-rightchat-bubble-left-ellipsis chat-bubble-right-ellipsischat-bubble-left-right phone phone-x-mark user user-circleuser-plus user-minus user-group users chatbot

Status (14)

x-mark check alert exclamation-circle exclamation-triangleinformation-circle question-mark-circle bell bell-alert eyeeye-slash light-bulb clock time-reset

Files (18)

save document document-text document-duplicate folder folder-openfolder-plus folder-minus clipboard clipboard-document-checkpaper-clip archive-box inbox book-open book-close book-stackedbookmark table

Commerce (11)

shopping-cart shopping-bag basket credit-card banknotescurrency-dollar currency-euro currency-pound currency-yencurrency-ringgit qr-code

Calendar & presentation (9)

calendar calendar-plus calendar-minus calendar-approvecalendar-reject calendar-days briefcase presentation-chart-linepresentation-media

Charts (3)

chart-line chart-bar chart-pie

Devices (16)

code console computer-laptop computer-code computer-desktopdevice-phone-mobile device-tablet battery-0 battery-10 battery-50battery-100 controller game window wifi vr

Security (5)

lock-closed lock-open key shield-check shield-exclamation

3D shapes (20)

container layer-stacks cube sphere cylinder tube cone pyramidpolygon torus plane wedge cylinder-half sphere-halfheart-extruded torus-knot tetrahedron octahedron icosahedrondodecahedron

Nature & objects (20)

bolt moon sun cloud star heart hand-thumb-up hand-thumb-downhand hand-grab flag map map-pin globe-alt truck cake gifttrophy medal sparkles

Design (13)

contrast gradient cursor marquee shapes square rectangledraw-line draw-curve pencil brush eraser crop

Layout (11)

horizontal-3-dots vertical-3-dots group-object ungroup-objectalign-left-object align-center-object align-right-objectalign-top-object align-middle-object align-bottom-object layout

Text (8)

plus minus font text text-align-center text-align-lefttext-align-right text-align-justify

Other (36)

bars-3 double-tick magnifying-glass magnifying-glass-focusmagnifying-glass-plus magnifying-glass-minus home cog-6-tooth trashwhiteboard tabs thunder ar flip-horizontal flip-vertical gridtic-tac-toe robot maximize minimize compress expand focuscrosshair hourglass-0 hourglass-50 hourglass-80 hourglass-100roof magic-wand circle diamond hexagon scissorsliders-horizontal sliders-vertical