Brainforge Knowledge

README

4 min read

Brainforge Icon Library

This directory contains the Brainforge brand icon library, exported from Figma. Icons are organized by category for easy discovery and use.

Directory Structure

assets/icons/
├── business/        # Business and finance icons (charts, money, scales, etc.)
├── technology/      # Technology and AI icons (gears, code, servers, etc.)
├── collaboration/   # Collaboration and people icons (handshake, speech bubbles, etc.)
└── productivity/    # Productivity and time icons (clocks, calendars, checklists, etc.)

Icon Format

All icons are provided as SVG files for:

  • Scalability (looks crisp at any size)
  • Small file sizes
  • Easy customization via CSS
  • Direct embedding in markdown

Usage in Markdown

Icons can be referenced in markdown files using standard image syntax:

![Chart icon](./assets/icons/business/chart-bar.svg)

Inline Usage

For inline icons with text:

![Icon](path/to/icon.svg) Some text here

Sizing

SVG icons scale automatically. To control size, you can:

  1. Use HTML in markdown (if your markdown renderer supports it):

    <img src="./assets/icons/business/chart-bar.svg" alt="Chart" width="24" height="24" />

  2. Reference in CSS (for web-based playbooks):

    .icon {
  width: 24px;
  height: 24px;
}

Icon Naming Conventions

Icons are named using kebab-case (lowercase with hyphens):

  • ✅ chart-bar.svg
  • ✅ handshake.svg
  • ✅ code-brackets.svg
  • ❌ ChartBar.svg
  • ❌ handshake_icon.svg

Color Customization

Icons use the Brainforge brand green (#579D6B) by default. To customize colors:

In SVG files

Edit the stroke or fill attributes directly in the SVG file.

Via CSS (for web)

.icon {
  color: #579D6B; /* Brand green */
  fill: currentColor; /* Inherits from color */
}

Adding New Icons

  1. Export icon from Figma as SVG
  2. Use “Contents Only” export setting (transparent background)
  3. Name the file using kebab-case
  4. Place in appropriate category directory
  5. Update this README if adding a new category

Extracting Icons from the Collection SVG

Status: Icons have been extracted from Figma and are available in the business/ directory as Group-X.svg files. These need to be organized into category directories and renamed with descriptive names.

Current Status:

  • ✅ 60 icons extracted from Figma (stored in business/ directory)
  • ✅ Directory structure created (business/, technology/, collaboration/, productivity/)
  • ✅ Example icons organized and renamed (see examples below)
  • ⏳ Remaining icons need categorization and renaming

To Organize Remaining Icons:

  1. Review icons visually - Open each Group-X.svg file in a browser or vector editor
  2. Identify the icon - Match to category guidelines below
  3. Rename and move: 
    cd assets/icons/business
mv Group-X.svg ../[category]/descriptive-name.svg
  4. Update ICON-MAPPING.md - Document what each icon is as you organize

Example Organized Icons:

  • technology/rocket.svg - Rocket/launch icon
  • technology/box-3d.svg - 3D box/pyramid
  • technology/lightbulb.svg - Lightbulb/idea
  • technology/globe.svg - Globe/world icon
  • business/chart-line.svg - Line chart
  • business/chart-bar.svg - Bar chart
  • business/chart-area.svg - Area chart
  • business/document.svg - Document/file
  • productivity/shield-star.svg - Shield with star
  • productivity/target.svg - Target/bullseye
  • productivity/check-circle.svg - Checkmark in circle
  • productivity/location-pin.svg - Location/map pin
  • productivity/trophy.svg - Trophy/award

See ICON-MAPPING.md for detailed organization guide.

Icon Categories

Business (business/)

Icons related to business, finance, and analytics:

  • Charts and graphs
  • Money and currency
  • Scales and justice
  • Calculators
  • Briefcases
  • Lock icons

Technology (technology/)

Icons related to technology, AI, and development:

  • Gears and cogs
  • Code brackets (</>)
  • Cloud and servers
  • Rocket ships
  • Computer screens
  • Lightbulbs (ideas)

Collaboration (collaboration/)

Icons related to people, communication, and teamwork:

  • Handshake
  • Speech bubbles
  • Multiple person silhouettes
  • Thumbs-up
  • Team icons

Productivity (productivity/)

Icons related to time management and productivity:

  • Clocks
  • Calendars
  • Checklists
  • Magnifying glass (search)
  • Shields
  • Strategy pieces

Brand Colors

Icons use the following brand colors:

  • Primary Green: #579D6B (vibrant green accent)
  • Dark Green: #244926 (outline/detail color)
  • Accent Green: #3FA93A (highlight color)

For full color palette, see 03-knowledge/brand-style-guide.md.

Examples

In Documentation

## Features
 
![Chart](./assets/icons/business/chart-bar.svg) **Analytics Dashboard**
Track your metrics with real-time charts and graphs.
 
![Handshake](./assets/icons/collaboration/handshake.svg) **Team Collaboration**
Work together seamlessly with integrated tools.

In Web Applications

If using icons in a web application (e.g., Next.js):

import ChartIcon from '@/assets/icons/business/chart-bar.svg';
 
export function FeatureCard() {
  return (
    <div>
      <ChartIcon className="w-6 h-6 text-brand-green" />
      <h3>Analytics</h3>
    </div>
  );
}

Questions or Updates

If you need to add new icons or have questions about usage, discuss with the team. This library should evolve as Brainforge’s visual language matures.

Last Updated: January 2026
Source: Figma Branding Materials → Icons page
Maintained By: Brainforge Team

Graph View