Design Reference Document

Mood Icon Systems

Exploration of 10 thematic icon systems for the Feels mood tracking app. Each concept provides visual metaphors for the emotional spectrum from horrible to great.

Horrible
Bad
Average
Good
Great
Missing
Placeholder
01

Weather

Atmospheric conditions as emotional states. Universal metaphor that translates across cultures — everyone understands a sunny day vs. a storm.

Best For
General audiences, wellness apps, users who prefer indirect emotional expression
⛈️ Horrible
🌧️ Bad
☁️ Average
⛅ Good
☀️ Great
🌫️ Missing
◌ Placeholder
SF cloud.bolt, cloud.rain, cloud, cloud.sun, sun.max
02

Garden

Plant life cycle from wilted to flourishing. Organic, nurturing metaphor that frames emotional health as something you cultivate over time.

Best For
Mindfulness-focused users, nature lovers, those who view wellness as growth
🥀 Horrible
🍂 Bad
🌱 Average
🌿 Good
🌸 Great
🕳️ Missing
⚬ Placeholder
SF leaf.fill, leaf, seedling, tree, flower
03

Hearts

Heart states from broken to overflowing. Direct emotional symbolism that feels personal and intimate. The universal symbol of feeling.

Best For
Emotionally expressive users, relationship-focused tracking, romantic aesthetic preference
💔 Horrible
🩶 Bad
🤍 Average
🩷 Good
💖 Great
🖤 Missing
♡ Placeholder
SF heart.slash, heart, heart.fill, heart.circle.fill, heart.fill (sparkling)
04

Energy

Fire and energy levels from extinguished to blazing. Dynamic, active metaphor that frames mood as vitality and inner power.

Best For
Active/athletic users, those tracking energy alongside mood, motivational framing
🪨 Horrible
💨 Bad
🕯️ Average
🔥 Good
⚡ Great
⬛ Missing
◇ Placeholder
SF circle.slash, wind, flame, flame.fill, bolt.fill
05

Ocean

Water states from turbulent depths to calm, sparkling surface. Evokes the ebb and flow of emotions with aquatic serenity.

Best For
Meditation practitioners, beach/ocean lovers, calm aesthetic preference
🌊 Horrible
🌀 Bad
💧 Average
🐚 Good
🐬 Great
🫧 Missing
○ Placeholder
SF water.waves, tornado, drop, fish, sparkles
06

Cosmic

Celestial objects from black holes to radiant stars. Vast, awe-inspiring metaphor that puts daily emotions in a grander perspective.

Best For
Astronomy enthusiasts, philosophical users, dark mode lovers, night owls
🕳️ Horrible
🌑 Bad
🌓 Average
🌕 Good
⭐ Great
✧ Missing
· Placeholder
SF circle.fill (black), moon, moon.lefthalf.filled, moon.fill, star.fill
07

Spirit Animals

Animal archetypes representing different emotional states. Playful approach that externalizes feelings as creature companions.

Best For
Playful users, animal lovers, those who prefer indirect expression, younger demographics
🦔 Horrible
🐌 Bad
🐢 Average
🦋 Good
🦅 Great
🐾 Missing
🥚 Placeholder
SF tortoise.fill, hare, bird, bird.fill, pawprint.fill
08

Beverages

Drink states from bitter to sweet celebration. Relatable daily ritual metaphor — mood as the drink you need or deserve right now.

Best For
Coffee/tea lovers, foodies, casual/humorous tone preference
🧊 Horrible
🫖 Bad
☕ Average
🧋 Good
🍾 Great
🫗 Missing
🥛 Placeholder
SF cup.and.saucer, mug, takeoutbag.and.cup.and.straw, wineglass
09

Soundtrack

Musical expressions from silence to symphony. Mood as the music playing in your mind — what genre is your day?

Best For
Music lovers, creative/artistic users, those who connect emotion to sound
🔇 Horrible
🔈 Bad
🎵 Average
🎶 Good
🎸 Great
⏸️ Missing
⏺️ Placeholder
SF speaker.slash, speaker.wave.1, music.note, music.note.list, guitars
10

Abstract

Geometric shapes representing emotional complexity. Minimal, non-figurative approach for those who prefer understated, design-forward aesthetics.

Best For
Minimalists, design-conscious users, those who want subtle/private expression
▼ Horrible
◆ Bad
■ Average
● Good
★ Great
○ Missing
· Placeholder
SF triangle.fill, diamond.fill, square.fill, circle.fill, star.fill

Implementation Notes

Technical Considerations

  • All emoji options render natively on iOS without custom assets
  • SF Symbols alternatives provided for each concept (requires custom drawing)
  • Consider emoji skin tone variations where applicable
  • Test emoji rendering across iOS versions (some are newer)
  • Placeholder/missing states should be visually distinct but unobtrusive

User Preference System

  • Allow users to select their preferred icon style in Settings
  • Store preference in UserDefaults (existing pattern)
  • Consider offering 2-3 options to avoid choice paralysis
  • Default to "Weather" or "Hearts" as most universally understood
  • Could offer as premium/subscription unlock

Accessibility

  • Ensure VoiceOver reads mood names, not emoji descriptions
  • Color palettes should maintain sufficient contrast
  • Consider adding subtle labels in larger widget sizes
  • Test with reduced motion settings

Recommended Shortlist

  • Weather — Most universal, works for everyone
  • Hearts — Emotional, personal, familiar
  • Garden — Wellness-aligned, growth mindset
  • Cosmic — Unique, works great in dark mode