Lookinglass Website Icons

Complete Icon Guide - Source, Inventory, Mapping & Implementation

📦 Icon Source

Provider: Flaticon.com
Total Icons: 76 SVG files
Style: Minimal line-art with 2-3px stroke weight
License: Commercial use (via Flaticon subscription)

🎨 Icon Specifications

Design Requirements

Technical Requirements

📂 Icon Inventory

All icons are located in /assets/icons/. Here’s the complete list:

Core Interface Icons

AI & Technology Icons

Communication Icons

Education & Professional Icons

File & Document Icons

Financial Icons

Layout & Organization Icons

Language-Specific Icons

System & Display Icons

Data & Analytics Icons

🎯 Icon Mapping - Website Usage

Homepage (index.html)

User Type Cards (Lines 77-97)

| User Type | Icon | File Name | |———–|——|———–| | Researcher/Student | 🎓 | graduation-cap.svg | | Founder/Startup | 🚀 | rocket-launch.svg | | Early Adopter | 💻 | user-robot.svg | | Power User | ⚡ | brain-lightning.svg |

Features Grid (Lines 206-266)

| Feature | Icon | File Name | |———|——|———–| | 24 models | 🤖 | layers.svg ✨ NEW! | | Transparent Pricing | 💵 | file-invoice-dollar.svg | | Smart Wallet | 💰 | wallet.svg | | Advanced Controls | 🎛️ | settings-sliders.svg | | Privacy First | 🔒 | shield-check.svg | | Global & Accessible | 🌍 | languages-world.svg |

FAQ Page (faq.html)

Section Headers

| Section | Emoji | Icon | File Name | |———|——-|——|———–| | Pricing & Billing | 💰 | 💵 | wallet.svg | | AI Models & Features | 🧠 | 🧠 | brain-circuit.svg | | App Features | 📱 | 📱 | tablet.svg | | Getting Started | 🚀 | 🚀 | rocket-launch.svg | | Technical | 🛠 | ⚙️ | settings.svg |

Models Page (models.html)

Understanding the Basics (Lines 24, 41)

| Section | Icon | File Name | |———|——|———–| | Tokens & Pricing | 💰 | price.svg | | AI Workspace | 🧠 | desk.svg |

Advanced Settings (Lines 396-435)

| Setting | Icon | File Name | |———|——|———–| | Creativity Level | 🎛️ | settings-sliders.svg | | AI Power Level | ⚡ | brain-lightning.svg | | Response Detail Level | 💭 | thought-bubble.svg | | Fast & Reliable | 🚀 | rocket-launch.svg | | Smart Savings | 💰 | percent-50.svg ✨ |

Guide Page (guide.html)

Interface Elements

| Element | Icon | File Name | |———|——|———–| | Chat Interface | 💬 | bubble-discussion.svg | | Microphone Button | 🎤 | circle-microphone.svg | | Send Button | ✉️ | paper-plane.svg | | Thread Management | 📁 | folder.svg | | Export | 📤 | file-export.svg | | Forward | ↪️ | redo.svg |

Pricing Page (pricing.html)

Why Pay-as-You-Go Section (Lines 562-582)

| Reason | Icon | File Name | |——–|——|———–| | No Subscription Fatigue | 🚫 | ban.svg | | Budget Control | 💰 | usd-circle.svg | | Model Flexibility | 🔧 | settings-sliders.svg | | Complete Transparency | 📊 | file-invoice-dollar.svg |

💻 Implementation Guide

Step 1: Add CSS Classes

Add these classes to /assets/css/style.scss:

/* Icon styling */
.section-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.75rem;
  color: var(--primary-color);
}

.inline-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25rem;
  color: var(--primary-color);
}

.inline-badge {
  width: 48px;
  height: 48px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.setting-icon {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 1rem;
  color: var(--primary-color);
}

/* User type icons */
.user-type-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Feature icons - background already styled */
.feature-icon img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1); /* Makes icons white */
}

/* Ensure SVGs inherit currentColor */
.section-icon svg,
.inline-icon svg,
.setting-icon svg {
  color: inherit;
}

/* Dark mode adjustments */
[data-theme="dark"] .section-icon,
[data-theme="dark"] .inline-icon,
[data-theme="dark"] .setting-icon {
  color: var(--primary-color); /* Bright green in dark mode */
}

Step 2: Replace Emojis in HTML

Example: Homepage User Type Cards

Before:

<div class="user-type-icon" role="img" aria-label="Education">🎓</div>

After:

<div class="user-type-icon">
  <img src="/assets/icons/graduation-cap.svg" alt="Education" loading="lazy">
</div>

Example: FAQ Section Headers

Before:

<h2 id="pricing-billing"><span role="img" aria-label="money bag">💰</span> Pricing & Billing</h2>

After:

<h2 id="pricing-billing">
  <img src="/assets/icons/wallet.svg" alt="" class="section-icon"> Pricing & Billing
</h2>

Example: Features Grid Icons

Before:

<div class="feature-icon">
  <svg viewBox="0 0 24 24"><!-- SVG paths --></svg>
</div>

After:

<div class="feature-icon">
  <img src="/assets/icons/layers.svg" alt="21 AI Models">
</div>

Step 3: Implementation Checklist

✨ Key Icon Highlights

Perfect Matches (No Compromises Needed)

100% Coverage

With the addition of layers.svg and multiple-alt.svg, you now have complete coverage for all icon needs across the entire website!

📝 Notes

Icon Reusability

Many icons are used in multiple locations:

Smart Savings Badge

percent-50.svg is the standout icon - use it prominently for:

Accessibility

Always include:

🚀 Next Steps

  1. Review this mapping - Confirm icon selections match your vision
  2. Add CSS classes - Copy the styles to style.scss
  3. Start implementing - Follow the checklist page by page
  4. Test thoroughly - Both themes, all screen sizes
  5. Commit changes - With descriptive commit message

Ready to start implementation? Begin with the homepage user type cards (easiest) and work your way through the checklist!

*Icons sourced from Flaticon.com Last Updated: October 26, 2025*