@molecule/app-icons-molecule

Molecule default icon set for molecule.dev — the fleet's built-in SVG glyphs bundled as an IconSet keyed by kebab-case name.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { setIconSet } from '@molecule/app-icons'
import { iconSet } from '@molecule/app-icons-molecule'

setIconSet(iconSet) // once, at app startup — before anything renders an icon

Type

provider

Installation

npm install @molecule/app-icons-molecule @molecule/app-icons

API

Constants

arrowDown

const arrowDown: IconData

arrowLeft

const arrowLeft: IconData

arrowRight

const arrowRight: IconData

arrowUp

const arrowUp: IconData

bell

const bell: IconData

bookmark

const bookmark: IconData

browser

Browser window — used by the IDE preview device-frame cycle to represent the "responsive" (no fixed device frame, full-width) state.

const browser: IconData

bug

Bug / report glyph — used for "report a bug" affordances (e.g. the IDE chat header's report button). A real beetle silhouette, not a warning triangle.

const bug: IconData

calendar

const calendar: IconData

chat

Speech-bubble glyph (authentic GitHub Octicons 16px comment). The themed channel icon for SMS/message activity in @molecule/app-ide-react's Activity card + panel — the SVG counterpart to the old 💬 emoji. Filled with currentColor so it follows the surrounding theme token like the rest of the set.

const chat: IconData

checkCircle

const checkCircle: IconData

check

const check: IconData

chevronDown

const chevronDown: IconData

chevronLeft

const chevronLeft: IconData

chevronRight

const chevronRight: IconData

chevronUp

const chevronUp: IconData

chevronsLeft

SVG path data for the chevrons left icon.

const chevronsLeft: IconData

chevronsRight

SVG path data for the chevrons right icon.

const chevronsRight: IconData

chevronsUpDown

SVG path data for the chevrons up-down icon — the universal neutral "this column is sortable but not currently sorted" glyph. Composed from the same chevron-up and chevron-down shapes (translated into the top and bottom halves) so it reads as one consistent family with the active asc/desc indicators.

const chevronsUpDown: IconData

clock

const clock: IconData

code

const code: IconData

copy

const copy: IconData

deviceDesktop

Monitor / desktop display — used by the IDE preview device-frame cycle.

const deviceDesktop: IconData

deviceMobile

Smartphone / mobile device — used by the IDE preview device-frame cycle.

const deviceMobile: IconData

deviceTablet

Tablet device (landscape slab with a home indicator) — used by the IDE preview device-frame cycle. Octicons has no tablet glyph, so this is drawn in the same 16px filled style: an outer rounded body, an inset screen cut out via the evenodd rule, and a home dot inside the screen.

const deviceTablet: IconData

download

const download: IconData

ellipsisHorizontal

const ellipsisHorizontal: IconData

exclamationTriangle

const exclamationTriangle: IconData

eyeClosed

const eyeClosed: IconData

eye

const eye: IconData

file

const file: IconData

filter

const filter: IconData

folder

const folder: IconData

gear

const gear: IconData

github

SVG path data for the github icon.

const github: IconData

gitlab

SVG path data for the gitlab icon.

const gitlab: IconData

globe

const globe: IconData

google

SVG path data for the google icon.

const google: IconData

hash

Hash/number-sign glyph (a hand-built # — four bars in the 16px box). The themed channel icon for chat-channel activity in @molecule/app-ide-react's Activity card + panel — the SVG counterpart to the old literal # text glyph. Filled with currentColor so it follows the surrounding theme token like the rest of the set.

const hash: IconData

heart

const heart: IconData

history

const history: IconData

home

const home: IconData

image

const image: IconData

infoCircle

const infoCircle: IconData

lightbulb

const lightbulb: IconData

linkExternal

const linkExternal: IconData

link

const link: IconData

lock

const lock: IconData

logoDot

SVG path data for the logo dot icon.

const logoDot: IconData

logoMark

SVG path data for the logo mark icon.

const logoMark: IconData

mail

const mail: IconData

maximize

const maximize: IconData

mention

const mention: IconData

menu

const menu: IconData

microphone

const microphone: IconData

minimize

const minimize: IconData

minus

const minus: IconData

moon

const moon: IconData

paperclip

const paperclip: IconData

pencil

const pencil: IconData

people

const people: IconData

pin

const pin: IconData

plus

const plus: IconData

question

const question: IconData

reply

const reply: IconData

rotate

Screen / device rotation (portrait ⇄ landscape) — used by the IDE preview panel's "Rotate" control to swap a fixed-frame device (tablet / mobile) between portrait and landscape.

Octicons has no screen-rotation glyph, so this is the canonical Material Design screen_rotation mark (a tilted device with the two curved re-orientation arrows) — instantly recognizable as "rotate the screen" and clearly distinct from the neighbouring two-arrow sync/refresh glyph. It is drawn on Material's native 24×24 grid; the renderer scales it to the requested pixel size like any other glyph.

const rotate: IconData

search

const search: IconData

share

const share: IconData

signIn

const signIn: IconData

signOut

const signOut: IconData

sortAsc

const sortAsc: IconData

sortDesc

const sortDesc: IconData

sparkle

A four-point sparkle (✦) — the "smart tip / suggestion" glyph used for the proactive relevant-skill hint and the onboarding tip card. Reads as a tip far better than the generic lightbulb it replaces (P3-01). Each of the four edges is a quadratic curve that bows toward the centre, forming the concave points.

const sparkle: IconData

starOutline

const starOutline: IconData

star

const star: IconData

sun

const sun: IconData

sync

const sync: IconData

table

const table: IconData

tag

const tag: IconData

thumbsdown

const thumbsdown: IconData

thumbsup

const thumbsup: IconData

trash

const trash: IconData

twitter

SVG path data for the twitter icon.

const twitter: IconData

unlock

const unlock: IconData

upload

const upload: IconData

user

const user: IconData

xCircle

const xCircle: IconData

xMark

const xMark: IconData

icons

Molecule default icon set — all icons keyed by kebab-case name.

Built from individual icon modules in ./icons/.

const icons: IconSet

iconSet

Molecule default icon set provider. Wire at app startup:

import { setIconSet } from '@molecule/app-icons'
import { iconSet } from '@molecule/app-icons-molecule'
setIconSet(iconSet)

const iconSet: IconSet

Core Interface

Implements @molecule/app-icons interface.

Injection Notes

Requirements

Peer dependencies:

• @molecule/app-icons ^1.0.1

Runtime Dependencies

• @molecule/app-icons

• Icon names are kebab-case ('arrow-right', 'check-circle'). The exported constants are camelCase (arrowRight) but registration converts the keys — <Icon name="arrowRight" /> is a runtime error, not a blank.

• Beyond the required ComponentIconName contract this set ships extra glyphs (browser, chat, device-desktop|mobile|tablet, hash, rotate, sparkle, star-outline), registered type-safely via the CustomIconNames augmentation.

• In components prefer the framework UI's <Icon name="…" /> (reads the bonded set); use getIconDataUrl(name, color) for CSS/background/favicon contexts.