Icon
An icon is a graphical representation of an object or concept. Icons are used to communicate information in a visual way and are often used to represent actions, objects, or states in an application.
Code Editor
Features
Provides different variants
Allows color customization
Enables icon sizing
Accepts custom attributes and className
Ensures responsive design
Anatomy
Import all parts and combine them together.
import { Icon } from '@umrel/umrel';
import type { IconProps } from '@umrel/umrel';<Icon source={IconHexagon} size={8} />Size
The icon size is determined by the multiplier token. If a number is provided, it uses the multiplier. If a string is provided, the size is set to the string value.
umrel.height.100Code Editor
Color
The icon color can be customized using the following options: props table.
Code Editor
Auto Width
The icon width can be set to using the property.
autoautoWidthCode Editor
Responsive Properties
The icon component provides responsive sizing through the property, allowing for adaptable layouts.
sizeCode Editor
Additional Attributes
The icon component accepts custom and properties.
attributesclassNameCode Editor
Accessibility
Key | Description |
|---|---|
! | Icons have aria-hidden="true" |