Components

Component

Icons

Token-aware icon inventory and semantic tone previews.

React3 props
PreviewReact
brand tonepositive tonewarning tonecritical tonemuted tone
search icon

search

check icon

check

close icon

close

plus icon

plus

minus icon

minus

chevronRight icon

chevronRight

chevronLeft icon

chevronLeft

chevronDown icon

chevronDown

arrowUp icon

arrowUp

arrowDown icon

arrowDown

arrowLeft icon

arrowLeft

arrowRight icon

arrowRight

moreHorizontal icon

moreHorizontal

moreVertical icon

moreVertical

externalLink icon

externalLink

copy icon

copy

share icon

share

edit icon

edit

trash icon

trash

filter icon

filter

settings icon

settings

infoCircle icon

infoCircle

alertCircle icon

alertCircle

checkCircle icon

checkCircle

calendar icon

calendar

locationPin icon

locationPin

megaphone icon

megaphone

heart icon

heart

star icon

star

chatBubble icon

chatBubble

sparkle icon

sparkle

download icon

download

upload icon

upload

user icon

user

mail icon

mail

phone icon

phone

eye icon

eye

eyeOff icon

eyeOff

lock icon

lock

file icon

file

image icon

image

warningTriangle icon

warningTriangle

Imports

import { IconGallery, IconTonePreview, iconItems } from "@hozorica/hods-react/icons";

Props

PropTypeDescription
sizeIconProps['size']Icon size forwarded to every rendered glyph.
toneneutral | brand | positive | warning | critical | mutedSemantic HODS foreground tone.
titlestringAccessible title for individual icons.

Platform Support

React

Wraps the @hozorica/hods-icons inventory for gallery and tone previews.

React Native

Use @hozorica/hods-icons directly for native icon rendering.

Usage

<IconTonePreview size={24} />

Notes

  • Icons remain decorative unless a title is provided.
  • Use IconGallery for inventory validation and IconTonePreview for semantic color QA.
  • Application controls should import individual icons from @hozorica/hods-icons when possible.