Icons
Utilities for consistent icon sizing, color behavior, and styling across the interface.
Colors
Fixed icon color styles that remain unchanged during hover, active, or button interaction states.
Sizes
Use the available size utilities to scale icons consistently. When used inline with text, wrap the icon in an inline-block for proper alignment.
-
mobile-portrait-icon-size-text
-
mobile-portrait-icon-size-xxs
-
mobile-portrait-icon-size-xs
-
mobile-portrait-icon-size-s
-
mobile-portrait-icon-size-m
-
mobile-portrait-icon-size-l
-
mobile-portrait-icon-size-xl
-
mobile-portrait-icon-size-xxl
Adaptive Sizing
Icon elements designed to adapt in size through their code setup or surrounding component structure, allowing them to scale consistently within their intended layout.
Position Adjustment
Small relative position utilities used to fine-tune icon alignment by 1px or 2px without affecting the surrounding layout.
-
mobile-portrait-position-up-1
-
mobile-portrait-position-up-2
-
mobile-portrait-position-down-1
-
mobile-portrait-position-down-2
-
mobile-portrait-position-left-1
-
mobile-portrait-position-left-2
-
mobile-portrait-position-right-1
-
mobile-portrait-position-right-2
Icon Components - User Guide
Icons saved as Components can be reused throughout the project while keeping their structure and styling consistent. Use component variants when different icon options need to share the same underlying setup.
The structure shown below defines how icon Components should be built and organized so new additions remain consistent with the existing system.
Icon Component Structure:
Icon Library
Central collection used to add, organize, and manage the icons available across the project.