Original Hara geometry The guide reviews deterministic icon geometry and semantic composition. Products and runtimes remain authoritative for commands, capability state, evidence and product status. hara-v2-icons-2026-08 · icons:6ad3e21f

Issue 106 · original geometry, explicit meaning

Symbols for Hara actions, states, capabilities, evidence, and routes.

Interface icons identify navigation and commands. State symbols accompany written evidence. Capability glyphs identify runtime boundaries. Route glyphs distinguish WWW, Playground, Specifications, Packages, World, and Learn.

Inspect interface icons Review capability glyphs Compare product family

01 · interface library

One calm monoline system for navigation and action.

Interface icons use the 24 × 24 grid, consistent stroke caps and joins, and no embedded fill colour. The same geometry renders inside text buttons, icon-only controls, command palettes and compact workbench chrome.

Grid: 24 × 24
Default stroke: 1.75
Smallest review: 16 px
Interactive target: 44 px minimum

Navigation and disclosure

Movement, route discovery, search, filters and disclosure controls.

12 icons

Homehome

fixed orientation

Backback

directional · RTL mirrors

Forwardforward

directional · RTL mirrors

Upup

directional · RTL mirrors

Menumenu

fixed orientation

Closeclose

fixed orientation

Searchsearch

fixed orientation

Filterfilter

fixed orientation

Expandexpand

fixed orientation

Collapsecollapse

fixed orientation

External linkexternal

fixed orientation

More actionsmore

fixed orientation

Actions and editing

Commands that mutate, inspect, publish, transfer or repeat work.

15 icons

Addadd

fixed orientation

Removeremove

fixed orientation

Editedit

fixed orientation

Copycopy

fixed orientation

Savesave

fixed orientation

Shareshare

fixed orientation

Runrun

fixed orientation

Stopstop

fixed orientation

Retryretry

fixed orientation

Refreshrefresh

fixed orientation

Downloaddownload

fixed orientation

Uploadupload

fixed orientation

Publishpublish

fixed orientation

Inspectinspect

fixed orientation

Comparecompare

fixed orientation

Optical scale study

Review the same geometry at every supported size.

At 16px, the symbol must remain recognizable. At 48px, the original small-grid geometry must not reveal inconsistent weight or accidental detail.

Representative interface icons at 16, 20, 24, 32 and 48 pixels
Icon	16px	20px	24px	32px	48px
Search`search`
Run`run`
Save`save`
Warning`warning`

Control composition

The parent control owns interaction and focus.

Open semantic rules

Icons inside visibly labelled controls are decorative. Icon-only buttons receive their accessible name from the button, not from a focusable SVG child.

02 · state and evidence

A symbol reinforces the written fact; it never replaces it.

State rows combine an icon, explicit wording, enclosing treatment and an evidence revision. Missing, measured zero, unsupported, unavailable and failed remain different facts even when a compact table needs to carry them.

State symbols: 11
Evidence distinctions: 5
Colour-only states: 0
Tooltip-only facts: 0

Shared state vocabulary

Products may add local states, but must define their written meaning and evidence boundary.

Current and passing

The cited check passed for the exact revision.

checker:accepted@204

Pending

Work has not reached a terminal result.

run:queued@205

Warning

The surface remains usable with explicit caution.

compat:partial@18

Failed

A terminal failure receipt exists.

run:failed@206

Unavailable

The path cannot currently complete; execution may still have succeeded.

network:none

Partial

Only a declared subset is supported.

target:wasm@9

Stale

The fact was valid for an older source revision.

snapshot:17

External authority

Identity or evidence is controlled outside this product.

github:@mina

Proposed

Planned behavior must not be presented as current.

proposal:42

Historical

Retained for comparison but no longer the primary contract.

study:2026-07

Locked

The action requires a role or authority boundary.

policy:maintainers

Evidence is not one empty state.

The visible value and state word survive when icon colour is removed.

Missing, zero, unsupported, unavailable and failed evidence
State	Value	Meaning
Missing	`—`	No measurement or fact was supplied.
Measured zero	`0`	A valid measurement exists and equals zero.
Unsupported	`N/A`	The target does not implement this capability or comparison.
Unavailable	`offline`	The fact may exist, but cannot be obtained now.
Failed	`error`	The attempt reached a terminal failure.

Contextual use

Keep state beside the object it qualifies.

std.work 0.4.2

Current

Published package coordinate · registry receipt 204

Browser / Wasm

Partial

Portable subset only · target revision 9

@mina

External authority

GitHub-backed identity · owner record

Share receipt

Unavailable

Execution succeeded; network capability is offline.

03 · runtime capabilities

The glyph identifies the capability. The host supplies its state.

Capability glyphs use the 32 × 32 identity grid and may carry one Hara signal aperture. They are stable names for sessions, files, canvas, storage and hosts—not proof that a capability is available or attached.

Glyph grid: 32 × 32
Capabilities: 16
State classes: 6
Authority: Runtime / provider

Preview state

Filtering changes only the guide view. It does not mutate or infer a capability.

Session

Identity, generation and lifecycle fence.

session:7c2d9a1e#g4

Attached

Source

Exact form and repository revision.

source:4f31d2c8

Attached

Files

Requested browser file access.

filesystem:pending

Requested

Storage

Local-only storage; no remote durability.

store:indexeddb@2

Degraded

Canvas

2D rendering surface available.

canvas:2d@1

Available

3D scene

No 3D host attached.

scene:none

Unavailable

Audio

User permission has not been granted.

permission:audio

Denied

Network

Execution is local and offline.

network:offline

Unavailable

Timer

Monotonic timing capability.

timer:monotonic@1

Available

Queue

A durable queue is requested, not active.

queue:proposal@3

Requested

Database

Read-only database session.

db:readonly@7

Degraded

Native host

Native Rust execution host.

host:rust@12

Attached

Wasm / browser

Capability-fenced browser runtime.

host:wasm@9

Attached

Package

Resolved package coordinate.

std.work:0.4.2

Available

Namespace

Resolved namespace identity.

work.core:17

Available

Agent tool

Agent/tool capability awaits explicit activation.

tool:reviewer@2

Requested

Capability lifecycle

Availability, request and attachment are separate facts.

01
Available
The host advertises the capability.
02
Requested
The product requested it but attachment is not complete.
03
Attached
The capability is active for the exact session generation.
04
Degraded
The capability is active with reduced guarantees.
05
Denied
Policy or user authority rejected attachment.
06
Unavailable
The current host cannot provide it.

04 · Hara product family

Six products, one family, no borrowed logos.

Route glyphs derive from Hara’s frame, signal aperture, lanes, brackets and connected nodes. They identify destinations in launchers, catalogue cards and compact navigation. They are never reused as generic commands.

Products: 6
Identity grid: 32 × 32
Accent: One signal aperture
Generic-action reuse: Forbidden

WWW

Public language narrative, Docs and Benchmarks.

hara-lang.org

Playground

Runnable samples, sessions and live components.

playground.hara-lang.org

Specs

Registry, checker, proposals and conformance evidence.

specs.hara-lang.org

Packages

Packages, namespaces, compatibility and stewardship.

packages.hara-lang.org

World

Articles, feeds, clippings, comments and contributor identity.

world.hara-lang.org

Learn

Curriculum, lessons, practice and learner progress.

learn.hara-lang.org

WWW

Public information family

16px24px32px48px

Destination: hara-lang.org
Use: Launcher, catalogue, app icon and route navigation
Not for: Generic commands or runtime state

Playground

Executable workspace

16px24px32px48px

Destination: playground.hara-lang.org
Use: Launcher, catalogue, app icon and route navigation
Not for: Generic commands or runtime state

Specs

Standards authority

16px24px32px48px

Destination: specs.hara-lang.org
Use: Launcher, catalogue, app icon and route navigation
Not for: Generic commands or runtime state

Packages

Distribution and ownership

16px24px32px48px

Destination: packages.hara-lang.org
Use: Launcher, catalogue, app icon and route navigation
Not for: Generic commands or runtime state

World

Community reader

16px24px32px48px

Destination: world.hara-lang.org
Use: Launcher, catalogue, app icon and route navigation
Not for: Generic commands or runtime state

Learn

Structured learning

16px24px32px48px

Destination: learn.hara-lang.org
Use: Launcher, catalogue, app icon and route navigation
Not for: Generic commands or runtime state

05 · semantics and composition

Accessible meaning belongs to the composition, not the path.

The same SVG can be decorative inside a labelled button or meaningful when it stands alone. The parent control owns focus, command state and accessible naming; the icon renderer owns deterministic geometry and safe defaults.

Visible label

The icon is decorative because the control text supplies the accessible name.

Icon-only control

The button requires an accessible name; the SVG remains decorative inside the control.

Standalone meaning

A meaningful standalone icon or glyph uses role=img and an explicit label.

Partial · target:wasm@9

State row

The symbol is paired with written state and evidence revision.

World

Product launcher

A standalone product glyph link exposes the product name and never doubles as an action icon.

Accessibility contract

The SVG is never the keyboard target.

Focus stays on the link, button, row or card. Decorative icons use `aria-hidden="true"`; meaningful standalone symbols use `role="img"` and an explicit label.

Visible-label control: Icon decorative; visible text names the command.
Icon-only control: Parent button or link requires an accessible name.
Standalone symbol: Meaningful SVG uses role=img and a label.
State: Symbol pairs with written state and, where relevant, evidence.
Forced colours: Geometry uses currentColor; signal accent yields to system colours.
Motion: No animation is required to identify any icon or glyph.

Use original Hara geometry; do not copy vendor, operating-system, franchise or third-party icon silhouettes.

Interface icons describe actions and navigation. Route glyphs identify surfaces. Capability glyphs identify runtime boundaries.

Visible text is preferred when a command can be misunderstood; icon-only controls still require an accessible name.

State combines written language, enclosing shape and line treatment. Colour reinforces but never owns meaning.

The SVG never receives keyboard focus. The parent link, button, row or card owns interaction and focus.

Products and runtimes own actual state; Visual Language owns geometry, names, optical balance and rendering defaults.

06 · ownership and adoption

Import the shared names and geometry; keep route semantics local.

Downstream products consume the public catalogue, Astro components and CSS. They decide where a command appears, which visible label it needs and what authoritative state or capability receipt it reflects.

Visual Language owns

Geometry and rendering

Stable names, aliases, path data, grid, stroke weight, optical balance, decorative defaults, focus composition, forced-colour behavior and product-family identity.

Products own

Commands and labels

Where icons appear, visible wording, command dispatch, shortcuts, selected/disabled behavior, local navigation and product composition.

Authorities own

State and evidence

Capability availability, runtime attachment, package status, proposal lifecycle, identity, permission, receipts and publication decisions.

Downstream iconography adoption map
Target	Primary use	Required local input
WWW / Docs	Navigation, external links, evidence states and product-family wayfinding.	Visible label, command/state authority and exact application context.
Playground	Run/stop/retry commands, session/file/canvas/3D capabilities and host state.	Visible label, command/state authority and exact application context.
Specs	Checker outcomes, proposal/current/historical state and publication commands.	Visible label, command/state authority and exact application context.
Packages	Package/namespace glyphs, compatibility state, publishing and stewardship actions.	Visible label, command/state authority and exact application context.
World	Feed actions, source/external state, presence, comments and accountable-bot capability.	Visible label, command/state authority and exact application context.
Learn	Lesson navigation, practice commands, progress state and product examples.	Visible label, command/state authority and exact application context.
Tool workbenches	Dense icon-only controls with labels, shortcuts and 44px touch alternatives.	Visible label, command/state authority and exact application context.
Hara Chrome	Compact extension chrome, runtime capability state and host identity.	Visible label, command/state authority and exact application context.

Pin a merged revision.Import `icons.js`, `v2-icons.css`, `HaraIcon.astro` and `HaraGlyph.astro` from the package.
Choose by semantic name.Use the catalogue name rather than copying SVG path data into a product.
Write the label first.Decide whether the symbol is decorative, parent-labelled or meaningful standalone.
Attach authoritative state.Obtain capability, lifecycle or evidence state from the relevant product/runtime authority.
Review all scales and modes.Verify 16–48px, light/dark, keyboard, forced colours, RTL and reduced motion.