The set
Import all 50 icons from the static barrel at @phuctech/ui/icons. The approved runtime direction is the PhucTech Soft set, generated from SVG sources in packages/icons/svg/prototype/soft. The browser below reads the generated catalog so the page stays complete when a new icon is added.
Icon index
Browse the set
Search the generated PhucTech Soft catalog by name, keyword, or group. Select an icon to inspect and copy its source.
50 icons
Try the properties
The preview and copied snippet share the same size, weight, and color settings.
The runtime set accepts the shared SVG attributes plus an optional size prop. Search matches names and keywords without accents, group filters apply immediately, and each icon detail dialog offers React and SVG copy formats. The 12 geometric prototypes remain only as historical design references.
Sizing and alignment
Let the Button and DropdownMenu primitives provide their default icon size. When an icon stands alone, choose one of the shared --size-icon-* values or a matching Tailwind size-* class. Soft icons use currentColor by default so an icon follows the state of its surrounding text.
Accessibility
- Decorative icons use
aria-hidden="true"and sit beside a visible label. - Icon-only controls receive a concise
aria-labelthat describes the action. - Do not use an icon as the only signal for destructive or status-critical information.
- Keep the icon and label aligned as one control so the hit target remains predictable.