Define states
Each icon definition maps named states to their glyph, accessible label, and optional animation flag.
Open-source · React · TypeScript · 31 icons
Early accessIcons that understand
interface state.
StateGlyph groups the related visual states of an interface action into one typed, accessible React component — so a button can move from idle → loading → success without scattered icon logic.
Get started
One package. Every state.
Install the React package and start using typed, accessible state icons in minutes. Tree-shaking ensures you only ship what you use.
npm install @stateglyph/reactHow it works
From state prop to accessible icon.
Pass your state
Import the component and pass a typed state prop — "idle", "loading", "success", or any state the icon supports.
Ship accessible UI
Every state carries an ARIA label and role. Add decorative={false} and screen readers announce the current state.
upload-button.tsx
import { UploadStateIcon } from "@stateglyph/react";
function UploadButton({ status }: { status: UploadState }) { return ( <button> <UploadStateIcon state={status} size={20} /> Upload file </button> );}Use it your way
Start simple. Own as much as you need.
Choose the integration that fits your project today. All three paths use the same state definitions and accessibility model.
React package01
Import and ship
Use ready-made, tree-shakeable components with typed state props in React, Next.js, or Vite.
Read setup→Copy-and-own CLI02
Keep the source
Generate an editable component inside your project when you want full control over its markup and styles.
Explore the CLI→Core definitions03
Build your own renderer
Use framework-independent metadata and TypeScript definitions for custom tooling or other UI layers.
View the API→Collections
Organized by interface intent.
Icons are grouped by what the user is doing — uploading, playing media, navigating — so you find related states together.
019 icons
Async workflows
Uploads, saves, payments, submissions, and other task lifecycles.
Explore collection →063 icons
Feedback and toggles
Temporary confirmation and saved preference states.
Explore collection →Roadmap
Coming soonA larger library, with room for your icons.
The first release focuses on a dependable set of state icons. The next phase makes the collection broader and gives you tools to create stateful icons from your own visual language.
Planned capabilities
- New workflow and product categories
- Additional open-source icon foundations
- Source and license metadata for every glyph
Principles
A focused icon system for changing UI.
Most icon libraries give you individual drawings. StateGlyph adds the missing relationship between them — so a button or status can move through its lifecycle without scattered imports and conditional rendering.
One component, many states
Related visual states live behind one stable component. No more switching between five separate icon imports.
Presentational only
StateGlyph renders state — it never owns your async logic, timers, or business rules. You stay in control.
Typed and accessible
Every state is a TypeScript literal. Every glyph ships with ARIA labels, roles, and reduced-motion support.
Open foundations
Every glyph keeps its source library and license metadata. Currently built on Lucide icons (ISC license).