example-usage

Icon Usage Examples

This document demonstrates how to use Brainforge icons in playbook markdown files.

Basic Usage

Icons can be embedded directly in markdown using standard image syntax:

![Rocket icon](./assets/icons/technology/rocket.svg)

Inline with Text

Icons work great inline with text:

![Lightbulb](./assets/icons/technology/lightbulb.svg) **Innovation**
Our AI-powered solutions drive innovation.
 
![Chart](./assets/icons/business/chart-bar.svg) **Analytics**
Track your metrics with real-time dashboards.
 
![Trophy](./assets/icons/productivity/trophy.svg) **Achievement**
Celebrate your team's success.

In Lists

Use icons to enhance bullet points:

## Key Features
 
- ![Shield](./assets/icons/productivity/shield-star.svg) **Security First**
  Enterprise-grade security for all your data
 
- ![Globe](./assets/icons/technology/globe.svg) **Global Reach**
  Deploy anywhere, scale globally
 
- ![Document](./assets/icons/business/document.svg) **Comprehensive Docs**
  Detailed documentation for every feature

In Tables

Icons can be used in markdown tables:

Feature	Icon	Description
Analytics		Real-time data visualization
Security		Enterprise security
Innovation		Cutting-edge technology

Sizing Icons

For web-based playbooks, you can control icon size using HTML:

<img src="./assets/icons/technology/rocket.svg" alt="Rocket" width="32" height="32" />

Or use CSS classes if your markdown renderer supports it:

![Rocket](./assets/icons/technology/rocket.svg){.icon-small}

Color Customization

Icons use brand colors by default:

• Primary: #579D6B (vibrant green)
• Dark: #244926 (dark green outline)
• Accent: #3FA93A (accent green)

To customize colors, edit the SVG file directly or use CSS filters for web applications.

Best Practices

1. Always include alt text - Makes icons accessible
2. Use descriptive names - Helps with SEO and accessibility
3. Keep icons consistent - Use same size for similar contexts
4. Don’t overuse - Icons should enhance, not clutter

Available Icons

Technology

• rocket.svg - Rocket/launch
• box-3d.svg - 3D box/pyramid
• lightbulb.svg - Lightbulb/idea
• globe.svg - Globe/world

Business

• chart-line.svg - Line chart
• chart-bar.svg - Bar chart
• chart-area.svg - Area chart
• document.svg - Document/file

Productivity

• shield-star.svg - Shield with star
• target.svg - Target/bullseye
• check-circle.svg - Checkmark in circle
• location-pin.svg - Location/map pin
• trophy.svg - Trophy/award

Note: More icons are available in the business/ directory as Group-X.svg files. See ICON-MAPPING.md for organization guide.