Icons
Greenhouse uses a curated set of 64 icons from Phosphor Icons, organised into nine categories. All icons accept a size prop and inherit the current text color via currentColor.
Status
Use status icons alongside text to communicate feedback, validation, and system states. Always pair with a label or tooltip, and never use status icons alone to convey meaning.
<AlertCircle/><AlertTriangle/><Check/><CheckCircle/><InfoCircle/><X/>Navigation
Use arrows for directional movement between pages or views. Use carets for expanding and collapsing UI elements like dropdowns, accordions, and menus.
<ArrowUp/><ArrowDown/><ArrowLeft/><ArrowRight/><CaretUp/><CaretDown/><CaretLeft/><CaretRight/>Actions
Use action icons inside buttons or as standalone triggers. Always pair with an aria-label when used without visible text. Prefer the icon-only button pattern for compact interfaces.
<Copy/><Download/><Minus/><Pencil/><Plus/><Trash/><Upload/>Interface
Use interface icons for common UI controls like search, settings, and menus. These are functional and should always have an accessible label.
<DotsThree/><Eye/><EyeSlash/><Gear/><List/><MagnifyingGlass/>Media
Use media icons when referencing files, folders, images, or camera capture. Pair with descriptive labels in contexts where the file type or action matters.
<Camera/><File/><Folder/><Image/>Plants
Use plant icons to represent species, collections, or growing zones in the greenhouse. These are illustrative and work well as visual identifiers alongside text labels.
<Cactus/><Clover/><FlowerLotus/><FlowerTulip/><Grains/><Leaf/><PottedPlant/><Tree/><TreeEvergreen/><TreePalm/>Care & Tools
Use care and tool icons to represent watering, temperature, light, and scheduling actions. Pair with labels in care schedule and settings contexts.
<Drop/><Fan/><Lightbulb/><SprayBottle/><Thermometer/><Timer/>Weather
Use weather icons to represent environmental conditions affecting plant care. Useful for frost alerts, watering reminders, and climate zone indicators.
<CloudFog/><CloudLightning/><CloudMoon/><CloudRain/><CloudSnow/><CloudSun/><Moon/><MoonStars/><Snowflake/><Sun/><SunHorizon/><Wind/>Environment
Use environment icons to represent growing locations and outdoor contexts. Useful for categorising plants by location; indoors, outdoors, greenhouse, or farm.
<Barn/><City/><Mountains/><Park/><Tent/>Usage
Import icons by name from @/components/Icons. Use the size prop to control dimensions — the default is 16. Icons inherit color from their parent via currentColor.
All icons include aria-hidden="true" by default since they are decorative. If an icon conveys meaning without accompanying text, wrap it in an element with an aria-label.