page

Icon Library Reference

License: MIT (Lucide, Heroicons) — Free for commercial use

Directory Structure

static/icons/
├── lucide/       # 44 icons (Lucide)
├── heroicons/
│   ├── outline/  # 34 icons
│   └── solid/    # 18 icons
└── social/       # 3 icons (WhatsApp, Shopee, Tokopedia)

All Available Icons

Lucide Icons (44)

  • arrow-right → /icons/lucide/arrow-right.svg
  • award → /icons/lucide/award.svg
  • calendar → /icons/lucide/calendar.svg
  • check → /icons/lucide/check.svg
  • chevron-down → /icons/lucide/chevron-down.svg
  • chevron-right → /icons/lucide/chevron-right.svg
  • clock → /icons/lucide/clock.svg
  • cloud → /icons/lucide/cloud.svg
  • copy → /icons/lucide/copy.svg
  • download → /icons/lucide/download.svg
  • external-link → /icons/lucide/external-link.svg
  • eye → /icons/lucide/eye.svg
  • flame → /icons/lucide/flame.svg
  • globe → /icons/lucide/globe.svg
  • heart → /icons/lucide/heart.svg
  • image → /icons/lucide/image.svg
  • info → /icons/lucide/info.svg
  • leaf → /icons/lucide/leaf.svg
  • link → /icons/lucide/link.svg
  • lock → /icons/lucide/lock.svg
  • mail → /icons/lucide/mail.svg
  • map-pin → /icons/lucide/map-pin.svg
  • menu → /icons/lucide/menu.svg
  • message-circle → /icons/lucide/message-circle.svg
  • minus → /icons/lucide/minus.svg
  • package → /icons/lucide/package.svg
  • phone → /icons/lucide/phone.svg
  • plus → /icons/lucide/plus.svg
  • search → /icons/lucide/search.svg
  • send → /icons/lucide/send.svg
  • settings → /icons/lucide/settings.svg
  • shield → /icons/lucide/shield.svg
  • sprout → /icons/lucide/sprout.svg
  • star → /icons/lucide/star.svg
  • sun → /icons/lucide/sun.svg
  • trash → /icons/lucide/trash.svg
  • tree-pine → /icons/lucide/tree-pine.svg
  • upload → /icons/lucide/upload.svg
  • users → /icons/lucide/users.svg
  • x → /icons/lucide/x.svg
  • zap → /icons/lucide/zap.svg

Heroicons Outline (34)

  • arrow-down-tray → /icons/heroicons/outline/arrow-down-tray.svg
  • arrow-up-tray → /icons/heroicons/outline/arrow-up-tray.svg
  • calendar → /icons/heroicons/outline/calendar.svg
  • camera → /icons/heroicons/outline/camera.svg
  • chat-bubble-left-right → /icons/heroicons/outline/chat-bubble-left-right.svg
  • check → /icons/heroicons/outline/check.svg
  • chevron-down → /icons/heroicons/outline/chevron-down.svg
  • chevron-right → /icons/heroicons/outline/chevron-right.svg
  • clock → /icons/heroicons/outline/clock.svg
  • cloud → /icons/heroicons/outline/cloud.svg
  • cog → /icons/heroicons/outline/cog.svg
  • credit-card → /icons/heroicons/outline/credit-card.svg
  • cube → /icons/heroicons/outline/cube.svg
  • exclamation-circle → /icons/heroicons/outline/exclamation-circle.svg
  • eye → /icons/heroicons/outline/eye.svg
  • globe-alt → /icons/heroicons/outline/globe-alt.svg
  • home → /icons/heroicons/outline/home.svg
  • information-circle → /icons/heroicons/outline/information-circle.svg
  • key → /icons/heroicons/outline/key.svg
  • link → /icons/heroicons/outline/link.svg
  • lock-closed → /icons/heroicons/outline/lock-closed.svg
  • lock-open → /icons/heroicons/outline/lock-open.svg
  • map-pin → /icons/heroicons/outline/map-pin.svg
  • minus → /icons/heroicons/outline/minus.svg
  • paper-airplane → /icons/heroicons/outline/paper-airplane.svg
  • phone → /icons/heroicons/outline/phone.svg
  • photo → /icons/heroicons/outline/photo.svg
  • plus → /icons/heroicons/outline/plus.svg
  • share → /icons/heroicons/outline/share.svg
  • shield-check → /icons/heroicons/outline/shield-check.svg
  • sun → /icons/heroicons/outline/sun.svg
  • truck → /icons/heroicons/outline/truck.svg
  • user → /icons/heroicons/outline/user.svg
  • users → /icons/heroicons/outline/users.svg

Heroicons Solid (18)

  • calendar → /icons/heroicons/solid/calendar.svg
  • check → /icons/heroicons/solid/check.svg
  • cloud → /icons/heroicons/solid/cloud.svg
  • cog → /icons/heroicons/solid/cog.svg
  • cube → /icons/heroicons/solid/cube.svg
  • exclamation-circle → /icons/heroicons/solid/exclamation-circle.svg
  • eye → /icons/heroicons/solid/eye.svg
  • heart → /icons/heroicons/solid/heart.svg
  • home → /icons/heroicons/solid/home.svg
  • information-circle → /icons/heroicons/solid/information-circle.svg
  • lock-closed → /icons/heroicons/solid/lock-closed.svg
  • map-pin → /icons/heroicons/solid/map-pin.svg
  • phone → /icons/heroicons/solid/phone.svg
  • shield-check → /icons/heroicons/solid/shield-check.svg
  • star → /icons/heroicons/solid/star.svg
  • sun → /icons/heroicons/solid/sun.svg
  • user → /icons/heroicons/solid/user.svg
  • users → /icons/heroicons/solid/users.svg

Social Media (3)

  • shopee → /icons/social/shopee.svg
  • tokopedia → /icons/social/tokopedia.svg
  • whatsapp → /icons/social/whatsapp.svg

Usage Example

<!-- Lucide icon -->
<img src="/icons/lucide/leaf.svg" alt="leaf" width="24" height="24">

<!-- Heroicons outline -->
<img src="/icons/heroicons/outline/phone.svg" alt="phone" width="24" height="24">

<!-- Inline SVG for styling -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

CSS Color Override

All heroicons/lucide use stroke="currentColor" — color inherits from parent:

.parent { color: var(--honey); }
.parent svg { width: 24px; height: 24px; }
Chat WhatsApp