LocalCN Trip - Icon System Demo

📐 Icon Sizes

Icons are available in 6 standardized sizes. Use the appropriate size based on context: --icon-xs (12px) for inline text, --icon-sm (16px) for navigation, --icon-md (20px) for default, --icon-lg (24px) for feature cards, --icon-xl (32px) for section headers, --icon-2xl (48px) for hero sections.

XS (12px) icon--xs

SM (16px) icon--sm

MD (20px) icon--md

LG (24px) icon--lg

XL (32px) icon--xl

2XL (48px) icon--2xl

Usage

<!-- Basic icon usage -->
<div class="icon icon--md icon--primary">
  <svg viewBox="0 0 24 24">
    <!-- SVG path data -->
  </svg>
</div>

<!-- Inline icon with text -->
<span class="icon-inline">
  <div class="icon icon--sm">
    <svg viewBox="0 0 24 24">...</svg>
  </div>
  <span>Text with icon</span>
</span>

🎨 Icon Colors

Icons inherit color through the currentColor property. Apply color variants using utility classes.

Primary icon--primary

Secondary icon--secondary

Accent icon--accent

Muted icon--muted

Success icon--success

Warning icon--warning

Danger icon--danger

White icon--white

🔵 Icon Badges

Icon badges provide a circular background container for icons. Available in multiple sizes and color variants.

Badge Sizes

Small (32px) icon-badge--sm

Medium (44px) icon-badge--md

Large (56px) icon-badge--lg

XLarge (72px) icon-badge--xl

Badge Color Variants

Primary icon-badge--primary

Secondary icon-badge--secondary

Tech icon-badge--tech

Glass icon-badge--glass

✈️ Travel Icons

Ready-to-use SVG icons for common travel and tourism scenarios. All icons follow the unified stroke style (2px stroke, rounded caps).

Map Marker

Locations, attractions

Clock

Opening hours, duration

Restaurant

Food, dining

Hotel

Accommodation

Transportation

Trains, buses

Price

Cost, budget

Navigation

Directions, GPS

Camera

Photos, memories

Information

Tips, details

Weather

Forecast, climate

Visa

Documents, entry

Wifi

Connectivity

✨ Icon Animations

Add subtle animations to icons using modifier classes. Respects prefers-reduced-motion for accessibility.

Spin icon--spin

Pulse icon--pulse

Bounce icon--bounce

📋 Usage Guidelines

Basic Icon

<!-- Basic icon with size and color -->
<div class="icon icon--md icon--primary">
  <svg viewBox="0 0 24 24">
    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
  </svg>
</div>

Icon with Badge Background

<!-- Icon with circular badge background -->
<div class="icon-badge icon-badge--md icon-badge--primary">
  <svg viewBox="0 0 24 24">
    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
  </svg>
</div>

Inline Icon with Text

<!-- Inline icon aligned with text -->
<span class="icon-inline">
  <div class="icon icon--sm icon--primary">
    <svg viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10"/>
      <polyline points="12 6 12 12 16 14"/>
    </svg>
  </div>
  <span>Opening Hours: 9:00 - 18:00</span>
</span>

Animated Icon

<!-- Spinning loading icon -->
<div class="icon icon--md icon--primary icon--spin">
  <svg viewBox="0 0 24 24">
    <line x1="12" y1="2" x2="12" y2="6"/>
    <line x1="12" y1="18" x2="12" y2="22"/>
    <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/>
    <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
  </svg>
</div>