Skip to content

🎨 How to Add Icons to Tools

This is a simple guide for adding icons to your tools in the hub.

The Simple Way It Works

1. Choose an Icon Name (in app.py)

Open app.py and find your tool in the DEFAULT_TOOLS list. Change the 'icon' field to a simple name:

{
    'id': 'stripe_integration',
    'name': 'Stripe/QBO Integration',
    'icon': 'credit-card',  # ← Just use a simple name!
    'category': 'Finance'
},

2. Add the Icon SVG (in icons.html)

Open templates/icons.html and add a new {% elif %} section with your icon's SVG code:

{% elif icon_name == 'credit-card' %}
    <svg class="applet-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect width="20" height="14" x="2" y="5" rx="2"/>
        <line x1="2" x2="22" y1="10" y2="10"/>
    </svg>

That's it! The template automatically shows the right icon for each tool.

📚 Available Icons

Here are the icons already set up in icons.html:

Icon Name What It Looks Like Good For
credit-card Credit card Payment/finance tools
file-text Document File processors
compass Compass Navigation/mapping
shopping-bag Shopping bag E-commerce
camera Camera Photo tools
mic Microphone Audio/recording
bar-chart Bar chart Analytics/reports
folder Folder File management
building Building Business/admin
sparkles Sparkles Special/featured

🔍 Where to Find More Icons

Lucide Icons: https://lucide.dev/icons

  1. Browse the icons
  2. Click the icon you want
  3. Copy the SVG code
  4. Paste it into icons.html with a new name

🎯 Example: Adding a New Icon

Let's say you want to add a "Zap" icon for automation tools:

Step 1: Update app.py

{
    'id': 'automation_tool',
    'name': 'Automation Tool',
    'icon': 'zap',  # ← New icon name
    'category': 'Productivity'
},

Step 2: Add to icons.html

Go to https://lucide.dev/icons/zap, copy the SVG, and add:

{% elif icon_name == 'zap' %}
    <svg class="applet-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
    </svg>

Done! ✅

The icon will automatically appear on your hub page.

🎨 Icon Colors

Icons automatically inherit colors from the position-based color system. You don't need to set colors manually!

  • Position 0 (first tool) → Orange background
  • Position 1 (second tool) → Purple background
  • Position 2 (third tool) → Blue background
  • And so on...

The icon itself is always dark gray for consistency.

❓ Need Help?

  • Icon not showing? Check that the icon name in app.py matches exactly in icons.html
  • Wrong icon? Make sure you're editing the right tool in app.py
  • Want to change colors? Edit static/css/tokens.css (look for --color-0, --color-1, etc.)

📝 Quick Checklist

  • Choose a simple icon name (e.g., credit-card, zap, file-text)
  • Update the 'icon' field in app.py for your tool
  • Add the SVG code to icons.html with {% elif icon_name == 'your-name' %}
  • Make sure the SVG has stroke="currentColor" (for color control)
  • Refresh the page and see your icon!

That's all there is to it! 🎉