Icon set design konzistence

# Icon Set Guidelines: FitWell App Icons

## 1. Design Principles

**Visual Style: Rounded Line Icons**
- Clean, modern, friendly (not clinical/intimidating)
- 2px stroke weight (thicker = more visible on small screens)
- 4px corner radius (soft but not overly bubbly)
- Line icons primary, filled icons for active states

**Detail Level: Medium**
- Recognizable at 24x24px (minimum)
- 3-5 distinct elements max per icon
- Avoid fine details that disappear when scaled down

**Metaphor Strategy: Literal with personality**
- Dumbbell = Strength training (not abstract shapes)
- Add subtle character (slight tilt, asymmetry) to avoid corporate stiffness
- Universal symbols first, avoid culture-specific metaphors

## 2. Grid System

**Base Canvas: 24x24px**
- Actual content area: 20x20px (2px padding on all sides)
- Export at 24x24px for @1x (48px @2x, 72px @3x)

**Keyline Templates:**

```
┌────────────────────────┐
│ ┌──────────────────┐ │ Square: 18x18px
│ │ │ │ (Most balanced)
│ │ │ │
│ │ │ │
│ └──────────────────┘ │
└────────────────────────┘

┌────────────────────────┐
│ ┌────────────┐ │ Rectangle: 20x14px
│ │ │ │ (Wide objects)
│ │ │ │
│ └────────────┘ │
└────────────────────────┘

┌────────────────────────┐
│ ●─────────● │ Circle: 18px diameter
│ ╱ ╲ │ (Round objects)
│ │ │ │
│ ╲ ╱ │
│ ●─────────● │
└────────────────────────┘
```

**Optical Adjustments:**
- Circles: Extend 1px beyond square keyline (appear same size)
- Triangles: Slightly larger to match perceived weight
- Horizontal elements: Can touch edges, vertical should have breathing room

## 3. Stroke & Fill

**Line Icons (Default State):**
- Stroke: 2px
- Caps: Round (softer than square)
- Joins: Round (consistent with caps)
- Color: #2C2C2C (dark gray, not pure black)

**Filled Icons (Active State):**
- Fill: Solid color #2C5F2D (brand green)
- No stroke (filled only)
- Same shapes as line version (just filled)

**Example Transformation:**
```
[Line] [Filled]
○ → ●
/ \ / \
─────── ███████
```

## 4. Visual Consistency

**Shape Language: Soft Geometric**
- Primary shapes: Circles, rounded rectangles
- Avoid sharp angles unless semantically necessary (e.g., lightning bolt)
- Consistent 4px corner radius across all icons

**Angle Constraints:**
- Prefer 0°, 45°, 90° angles
- Diagonal elements: Exactly 45° (use guides)
- Asymmetric elements: Acceptable for personality, but keep balanced

**Size Relationships:**
- **Small details:** 2-4px (dots, indicators)
- **Medium elements:** 6-10px (sub-icons within icon)
- **Large elements:** 14-18px (main subject)

Example: Dumbbell icon
- Handle: 8px width (medium)
- Weights: 6px circles (medium-small)
- Total: Fits 18x18px keyline

## 5. Semantic Grouping

**Workout Category Icons:**
All share "action" visual cue (person silhouette or object in motion)
- 🏋️ Strength: Dumbbell with slight tilt (motion)
- 🧘 Yoga: Person in pose (calm, balanced)
- 🏃 Cardio: Running figure (dynamic)
- 🤸 Flexibility: Stretching figure

**Feature Icons:**
All include "tool" metaphor (objects user interacts with)
- 📊 Progress: Bar chart ascending
- ⏱️ Timer: Stopwatch
- 📅 Schedule: Calendar with checkmark
- 🍎 Nutrition: Apple (healthy food)

**State Variations:**

| State | Style | Color |
|-------|-------|-------|
| Default | Line | #6B6B6B (medium gray) |
| Hover | Line | #2C2C2C (dark gray) |
| Active | Filled | #2C5F2D (brand green) |
| Disabled | Line | #C4C4C4 (light gray) |

## 6. Accessibility

**Minimum Size: 16x16px**
- Below this, use filled icons (more recognizable)
- Test by zooming out in design tool

**Distinctiveness Test:**
Each icon must be recognizable when:
- Scaled to 16x16px
- Converted to grayscale
- Viewed at arm's length on phone

❌ **Too Similar:**
- Dumbbell vs Barbell (both look like horizontal lines at small size)
- Solution: Dumbbell = symmetrical weights, Barbell = thicker center

✅ **Distinct:**
- Dumbbell (symmetrical) vs Yoga Mat (rolled cylinder)
- Completely different shapes

**Color-Blind Safe:**
- Don't rely on color alone to distinguish icons
- Use shape + label text in UI
- Test with color-blind simulator (Stark plugin)

## 7. Export Specifications

**SVG Optimization:**
```xml
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

- Use `stroke="currentColor"` (inherits CSS color)
- Clean paths (no hidden layers, merged shapes)
- Round coordinates to nearest 0.5px

**PNG Exports:**
- @1x: 24x24px (base)
- @2x: 48x48px (retina)
- @3x: 72x72px (high-DPI)
- Format: PNG-24 with transparency

**Naming Convention:**
`ic_[category]_[name]_[size]_[variant].svg`

Examples:
- `ic_workout_strength_24_line.svg`
- `ic_workout_strength_24_filled.svg`
- `ic_feature_timer_24_line.svg`

**Sprite Sheet:**
Organize by category in design file:
```
[Workout Icons] [Feature Icons] [UI Icons]
🏋️ 🧘 🏃 🤸 📊 ⏱️ 📅 🍎 ➕ ❌ ⚙️ ℹ️
```

## 8. Usage Guidelines

**When to Use Each Icon:**

✅ **DO Use Icons For:**
- Navigation (persistent actions)
- Categories (visual scanning)
- Status indicators (quick recognition)
- Repeated UI elements (consistency)

❌ **DON'T Use Icons For:**
- Rare actions (users won't learn meaning)
- Complex concepts requiring explanation
- As decorative elements without function

**Spacing:**
- Icon + Text: 8px gap minimum
- Icon grids: 16-24px between icons
- Touch targets: 44x44px minimum (even if icon is 24px)

**Pairing with Text:**

```
GOOD:
[Icon] Label ← Icon left, text right, aligned center
24px 16px text

BAD:
[Icon] ← Icon without label (only for universal symbols)
[Tiny Icon] Label ← Icon too small relative to text
```

**Dos and Don'ts:**

✅ DO:
- Use consistent size within same UI context
- Align icons to pixel grid (no blurry edges)
- Test on actual devices (not just design tool)
- Pair with labels for non-universal icons

❌ DON'T:
- Mix different icon styles (line + 3D)
- Rotate icons for "variety" (breaks consistency)
- Use color alone to convey meaning
- Make icons too decorative (prioritize clarity)

## Example Icons with Annotations

### 1. Strength Training (Dumbbell)
```
○───○ ← Weights: 6px circles
│ │ ← Handle: 8px width, 2px stroke
○───○ ← Symmetrical (balanced)
```
Rationale: Universal fitness symbol, simple shapes, scales well

### 2. Yoga (Person in Pose)
```
○ ← Head: 4px circle
╱│╲ ← Arms: 2px strokes, 45° angles
╱ │ ╲ ← Body: centered, 2px stroke
╱ ╲ ← Legs: grounded, stable
```
Rationale: Shows calm/balance, recognizable pose, minimal detail

### 3. Progress (Ascending Bars)
```
▂▄▆█ ← 4 bars, increasing height
││││ ← 4px width each, 2px gap
└─→ ← Optional: subtle arrow (growth direction)
```
Rationale: Universal "improvement" metaphor, data-focused

### 4. Timer (Stopwatch)
```
◠ ← Crown: 2px, centered
┌─┐ ← Outer circle: 16px diameter
│12│ ← Numbers: optional, 8px font
│ ●─→ ← Hand: 2px, 8px length
└─┘
```
Rationale: Recognizable time symbol, clean circular shape

### 5. Nutrition (Apple)
```
╱ ← Leaf: 2px, tilted
● ← Top indent: small circle cutout
█ ← Body: rounded shape, 14x16px
│ ← Optional bite mark: 4px circle removed
●
```
Rationale: Universal "healthy food" symbol, organic shape adds personality

## Implementation Code

```jsx
// React component example
function Icon({ name, variant = 'line', size = 24, color = 'currentColor' }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill={variant === 'filled' ? color : 'none'}
stroke={variant === 'line' ? color : 'none'}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<use xlinkHref={`#icon-${name}`} />
</svg>
);
}

// Usage
<Icon name="strength" variant="filled" size={24} color="#2C5F2D" />
```

## Quality Checklist

✓ All icons fit within 20x20px safe area
✓ Consistent 2px stroke weight
✓ 4px corner radius applied uniformly
✓ Filled variants match line icon shapes exactly
✓ Tested at 16px minimum size
✓ Passed color-blind accessibility test
✓ SVGs optimized (< 1KB each)
✓ Naming convention followed
✓ Exported @1x, @2x, @3x PNG variants