225 lines
7.0 KiB
Markdown
225 lines
7.0 KiB
Markdown
# HomAroma: Curated Lucide Icon Registry
|
|
|
|
This document contains a curated list of 80 `lucide-react` icons tailored specifically for the **HomAroma** project. It is divided into 30 business-specific icons (Home Fragrance & Wellness) and 50 general E-commerce icons.
|
|
|
|
You can use this list directly in your `iconRegistry.ts` file to populate the Admin Dropdown and Frontend components.
|
|
|
|
## 🌿 30 Business-Specific Icons (HomAroma / Fragrance / Wellness)
|
|
These icons are selected to represent product categories, scent notes, moods, and the core identity of a home fragrance and wellness brand.
|
|
|
|
| Icon Name | Suggested Usage / Meaning |
|
|
| :--- | :--- |
|
|
| `Sparkles` | Signature products, Best sellers, Magic / Premium |
|
|
| `Leaf` | Organic, Natural ingredients, Green notes |
|
|
| `Wind` | Aroma, Diffusers, Air circulation, Scent throw |
|
|
| `Droplets` | Essential oils, Serums, Liquid extracts |
|
|
| `Flower2` | Floral scent notes (Rose, Jasmine, etc.) |
|
|
| `Flame` | Candles, Warmth, Fireplace |
|
|
| `Sofa` | Home decor, Living room ambiance |
|
|
| `BedDouble` | Bedroom, Sleep wellness, Pillow mists |
|
|
| `Bath` | Bath & Body products, Spa, Relaxation |
|
|
| `Sun` | Morning routines, Bright / Uplifting scents |
|
|
| `Moon` | Night routines, Calming / Sleep scents |
|
|
| `TreePine` | Woody scent notes (Cedar, Sandalwood, Pine) |
|
|
| `Sprout` | Plant-based, Vegan, Clean beauty |
|
|
| `Coffee` | Gourmand notes (Coffee, Vanilla, Warmth) |
|
|
| `Waves` | Ocean breeze, Aquatic scent notes |
|
|
| `Cherry` | Fruity / Berry scent notes |
|
|
| `Citrus` | Citrus notes (Orange, Lemon, Bergamot) |
|
|
| `Snowflake` | Cooling, Mint, Crisp winter notes |
|
|
| `Palmtree` | Tropical / Summer collections |
|
|
| `Crown` | Luxury / Exclusive collections |
|
|
| `Gem` | Rare / Premium ingredients |
|
|
| `Feather` | Light, Gentle, Sensitive skin |
|
|
| `Smile` | Mood enhancing, Happiness |
|
|
| `Zap` | Energizing, Invigorating scents |
|
|
| `Cloud` | Airy, Soft, Linen sprays |
|
|
| `Beaker` | Formulation, Lab, Science of scent |
|
|
| `SprayCan` | Room sprays, Body mists |
|
|
| `Wine` | Rich / Boozy notes (Bourbon, Rum) |
|
|
| `MountainSnow` | Earthy, Fresh mountain air |
|
|
| `Vegan` | Cruelty-free, Vegan certification |
|
|
|
|
---
|
|
|
|
## 🛒 50 General E-commerce & UI Icons
|
|
These icons are essential for standard E-commerce navigation, user accounts, checkout flows, and UI controls.
|
|
|
|
### Shopping & Cart
|
|
| Icon Name | Suggested Usage / Meaning |
|
|
| :--- | :--- |
|
|
| `ShoppingBag` | Cart (Bag style) |
|
|
| `ShoppingCart` | Cart (Trolley style) |
|
|
| `Package` | Orders, Physical products |
|
|
| `Truck` | Shipping, Delivery |
|
|
| `CreditCard` | Payment methods |
|
|
| `Wallet` | Store credit, Points |
|
|
| `Tag` | Sale, Price tags |
|
|
| `Percent` | Discounts, Promotions |
|
|
| `Gift` | Gift cards, Wrapping service |
|
|
| `Ticket` | Vouchers, Coupons |
|
|
| `Store` | Physical stores, About the brand |
|
|
|
|
### Account & User
|
|
| Icon Name | Suggested Usage / Meaning |
|
|
| :--- | :--- |
|
|
| `User` | My Account, Profile |
|
|
| `Heart` | Wishlist, Favorites |
|
|
| `Clock` | Order history, Recently viewed |
|
|
| `MapPin` | Shipping address, Store locator |
|
|
| `Settings` | Account settings |
|
|
| `LogOut` | Sign out |
|
|
| `LogIn` | Sign in |
|
|
| `Bell` | Notifications |
|
|
| `Bookmark` | Saved for later |
|
|
|
|
### Navigation & Actions
|
|
| Icon Name | Suggested Usage / Meaning |
|
|
| :--- | :--- |
|
|
| `Search` | Search bar |
|
|
| `Menu` | Mobile hamburger menu |
|
|
| `X` | Close modals / drawers |
|
|
| `ArrowRight` | Next step, Call to action |
|
|
| `ArrowLeft` | Go back |
|
|
| `ChevronRight` | Breadcrumbs, Accordion |
|
|
| `ChevronDown` | Dropdowns |
|
|
| `Plus` | Add to cart / Expand |
|
|
| `Minus` | Decrease quantity / Collapse |
|
|
| `Trash2` | Remove item |
|
|
| `Eye` | Quick view |
|
|
| `Filter` | Filter products |
|
|
| `SlidersHorizontal` | Sort & Filter options |
|
|
| `RefreshCw` | Returns, Exchanges, Sync |
|
|
| `Camera` | Upload photo (Reviews) |
|
|
| `Share2` | Share product |
|
|
|
|
### Information & Trust
|
|
| Icon Name | Suggested Usage / Meaning |
|
|
| :--- | :--- |
|
|
| `Award` | Quality guarantee, Awards |
|
|
| `ShieldCheck` | Secure payment, Warranty |
|
|
| `Star` | Reviews, Ratings |
|
|
| `ThumbsUp` | Helpful review |
|
|
| `HelpCircle` | FAQ, Help center |
|
|
| `Info` | Product details, About |
|
|
| `Phone` | Customer service (Phone) |
|
|
| `Mail` | Newsletter, Email support |
|
|
| `MessageCircle` | Live chat |
|
|
| `CheckCircle2` | Success states, Validation |
|
|
| `XCircle` | Error states |
|
|
| `AlertCircle` | Warnings, Important notices |
|
|
| `Calendar` | Delivery dates, Events |
|
|
| `Box` | Inventory, General item |
|
|
|
|
---
|
|
|
|
## 💻 Example Implementation (TypeScript)
|
|
|
|
You can copy and paste this into your `iconRegistry.ts` file:
|
|
|
|
```typescript
|
|
import {
|
|
// Business
|
|
Sparkles, Leaf, Wind, Droplets, Flower2, Flame, Sofa, BedDouble, Bath,
|
|
Sun, Moon, TreePine, Sprout, Coffee, Waves, Cherry, Citrus, Snowflake,
|
|
Palmtree, Crown, Gem, Feather, Smile, Zap, Cloud, Beaker, SprayCan,
|
|
Wine, MountainSnow, Vegan,
|
|
|
|
// E-commerce
|
|
ShoppingBag, ShoppingCart, Package, Truck, CreditCard, Wallet, Tag, Percent,
|
|
Gift, Ticket, Store, User, Heart, Clock, MapPin, Settings, LogOut, LogIn,
|
|
Bell, Bookmark, Search, Menu, X, ArrowRight, ArrowLeft, ChevronRight,
|
|
ChevronDown, Plus, Minus, Trash2, Eye, Filter, SlidersHorizontal, RefreshCw,
|
|
Camera, Share2, Award, ShieldCheck, Star, ThumbsUp, HelpCircle, Info,
|
|
Phone, Mail, MessageCircle, CheckCircle2, XCircle, AlertCircle, Calendar, Box
|
|
} from 'lucide-react';
|
|
|
|
export const ICON_REGISTRY = {
|
|
// Business
|
|
'sparkles': Sparkles,
|
|
'leaf': Leaf,
|
|
'wind': Wind,
|
|
'droplets': Droplets,
|
|
'flower': Flower2,
|
|
'flame': Flame,
|
|
'sofa': Sofa,
|
|
'bed': BedDouble,
|
|
'bath': Bath,
|
|
'sun': Sun,
|
|
'moon': Moon,
|
|
'tree-pine': TreePine,
|
|
'sprout': Sprout,
|
|
'coffee': Coffee,
|
|
'waves': Waves,
|
|
'cherry': Cherry,
|
|
'citrus': Citrus,
|
|
'snowflake': Snowflake,
|
|
'palmtree': Palmtree,
|
|
'crown': Crown,
|
|
'gem': Gem,
|
|
'feather': Feather,
|
|
'smile': Smile,
|
|
'zap': Zap,
|
|
'cloud': Cloud,
|
|
'beaker': Beaker,
|
|
'spray-can': SprayCan,
|
|
'wine': Wine,
|
|
'mountain': MountainSnow,
|
|
'vegan': Vegan,
|
|
|
|
// E-commerce
|
|
'shopping-bag': ShoppingBag,
|
|
'shopping-cart': ShoppingCart,
|
|
'package': Package,
|
|
'truck': Truck,
|
|
'credit-card': CreditCard,
|
|
'wallet': Wallet,
|
|
'tag': Tag,
|
|
'percent': Percent,
|
|
'gift': Gift,
|
|
'ticket': Ticket,
|
|
'store': Store,
|
|
'user': User,
|
|
'heart': Heart,
|
|
'clock': Clock,
|
|
'map-pin': MapPin,
|
|
'settings': Settings,
|
|
'logout': LogOut,
|
|
'login': LogIn,
|
|
'bell': Bell,
|
|
'bookmark': Bookmark,
|
|
'search': Search,
|
|
'menu': Menu,
|
|
'close': X,
|
|
'arrow-right': ArrowRight,
|
|
'arrow-left': ArrowLeft,
|
|
'chevron-right': ChevronRight,
|
|
'chevron-down': ChevronDown,
|
|
'plus': Plus,
|
|
'minus': Minus,
|
|
'trash': Trash2,
|
|
'eye': Eye,
|
|
'filter': Filter,
|
|
'sliders': SlidersHorizontal,
|
|
'refresh': RefreshCw,
|
|
'camera': Camera,
|
|
'share': Share2,
|
|
'award': Award,
|
|
'shield-check': ShieldCheck,
|
|
'star': Star,
|
|
'thumbs-up': ThumbsUp,
|
|
'help': HelpCircle,
|
|
'info': Info,
|
|
'phone': Phone,
|
|
'mail': Mail,
|
|
'chat': MessageCircle,
|
|
'check-circle': CheckCircle2,
|
|
'x-circle': XCircle,
|
|
'alert': AlertCircle,
|
|
'calendar': Calendar,
|
|
'box': Box,
|
|
} as const;
|
|
|
|
export type AvailableIcons = keyof typeof ICON_REGISTRY;
|
|
```
|