Skip to content

Home Docs Components Examples Playground

⌘K

(opens in new tab)

Accessible React controls with a CSS and SVG material engine.

Product

Components Examples Playground Packages

Learn

Documentation Getting started Concepts AI resources

Project

Community Showcase Versions GitHub

Independent open-source software. Not affiliated with or endorsed by Apple Inc.

Component catalog

Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.

Icon

A public Icon component from @liquidify/react.

import { Icon } from "@liquidify/react/icon"

Overview

Basic Icon

A focused starting point showing Icon with its essential configuration.

API

This component has no component-specific public props.

Guidelines

Do

Use Icon when its semantics match the content or action.
Keep labels concise, specific, and consistent with the surrounding interface.
Test the component with keyboard navigation, zoom, and both color schemes.

Don't

Do not use Icon as a visual substitute for a different semantic element.
Do not rely on color or an icon alone to communicate essential meaning.
Do not override the component tokens with fixed values unless the product theme requires it.

Accessibility

Icon preserves the semantics of its content and should be given a clear accessible label when its visible content does not provide one.

Keyboard

Use meaningful visible text whenever possible.
Mark purely decorative imagery as hidden from assistive technology.
Verify reading order at increased text sizes.

Tokens

Name	Value

Key features

Liquid material
Uses Liquidify surfaces and theme-aware design tokens.
Typed API
Provides a typed React API with generated prop documentation.
Accessible by default
Preserves semantic structure, focus visibility, and assistive-technology state.

Resources

Source
Markdown
JSON
Storybook