Brainforge Knowledge

ICON-MAPPING

2 min read

Icon Mapping Guide

This file helps identify and categorize the 60 icons extracted from Figma. Icons are currently stored in the business/ directory with generic Group-X.svg names and need to be organized into appropriate categories.

Icon Identification

To identify icons:

  1. Open the SVG file in a browser or vector editor
  2. Match the visual to the categories below
  3. Rename using kebab-case (e.g., chart-bar.svg)
  4. Move to appropriate category directory

Category Guidelines

Business (business/)

  • Charts and graphs (bar, line, pie, area)
  • Money and currency symbols
  • Scales and justice
  • Calculators
  • Briefcases
  • Documents and files
  • Buildings
  • Analytics dashboards

Technology (technology/)

  • Gears and cogs
  • Code brackets (</>)
  • Cloud and servers
  • Rocket ships
  • Computer monitors
  • Lightbulbs (ideas)
  • 3D boxes/pyramids
  • Locks and security
  • Database icons

Collaboration (collaboration/)

  • Handshake
  • Speech bubbles
  • Multiple person silhouettes
  • Team icons
  • Megaphones
  • Notification bells
  • Message icons

Productivity (productivity/)

  • Clocks and timers
  • Calendars
  • Checklists
  • Magnifying glass (search)
  • Stars
  • Trophies
  • Shields
  • Targets/bullseyes
  • Arrows and navigation
  • Flags

Example Icons Already Organized

  • technology/rocket.svg - Rocket/launch icon
  • technology/box-3d.svg - 3D box/pyramid
  • technology/lightbulb.svg - Lightbulb/idea icon
  • business/chart-line.svg - Line chart
  • business/chart-bar.svg - Bar chart
  • business/document.svg - Document/file icon
  • productivity/shield-star.svg - Shield with star
  • productivity/target.svg - Target/bullseye
  • productivity/check-circle.svg - Checkmark in circle

Quick Organization Script

To quickly organize remaining icons:

cd standards/assets/icons/business
 
# Example: Move and rename icons
# mv Group-8.svg ../collaboration/handshake.svg
# mv Group-9.svg ../technology/gear.svg
# etc.

Naming Convention

Use descriptive kebab-case names:

  • ✅ chart-bar.svg
  • ✅ handshake.svg
  • ✅ code-brackets.svg
  • ✅ clock-alarm.svg
  • ❌ ChartBar.svg
  • ❌ handshake_icon.svg
  • ❌ group-1.svg

Next Steps

  1. Review all icons in business/ directory
  2. Identify each icon visually
  3. Rename and move to appropriate category
  4. Update this mapping file as you organize
  5. Update README.md with final icon list

Graph View