lobe-icons-guide

Lobe Icons Repository Guide

This guide provides comprehensive information about the lobe-icons repository structure and how to add new icons.

Project Overview

The lobe-icons repository contains over 150 AI/ML brand icons organized in a consistent structure. Each icon brand has its own directory under src/ with standardized components and exports.

Directory Structure

Root Structure

• src/ - Contains all icon brand directories
• packages/ - Static format packages (PNG, SVG, WebP)
• docs/ - Documentation and guides
• scripts/ - Build and automation scripts

Icon Brand Structure

Each icon brand follows this pattern:

src/IconName/
├── index.ts          # Main exports
├── style.ts          # Brand constants and styling
├── index.md          # Documentation
└── components/
    ├── Mono.tsx      # Monochrome icon
    ├── Color.tsx     # Colored icon (if applicable)
    ├── Text.tsx      # Text component
    ├── Avatar.tsx    # Avatar component
    └── Combine.tsx   # Combined icon+text

Adding a New Icon

1. Create Directory Structure

Create a new directory under src/ with your icon brand name:

src/YourIconName/

2. Essential Files to Create

Style Configuration (style.ts)

export const TITLE = 'YourIconName';
export const TEXT_MULTIPLE = 0.6;        // Used in Combine component
export const SPACE_MULTIPLE = 0.1;       // Used in Combine component
export const COLOR_PRIMARY = '#yourBrandColor'; // Used in Avatar

// Avatar constants (recommended)
export const AVATAR_BACKGROUND = COLOR_PRIMARY;
export const AVATAR_COLOR = '#fff';
export const AVATAR_ICON_MULTIPLE = 0.6;

Monochrome Icon (Mono.tsx)

'use client';

import { memo } from 'react';
import type { IconType } from '@/types';
import { TITLE } from '../style';

const Icon: IconType = memo(({ size = '1em', style, ...rest }) => {
  return (
    <svg
      fill="currentColor"
      fillRule="evenodd"
      height={size}
      style={{ flex: 'none', lineHeight: 1, ...style }}
      viewBox="0 0 24 24"
      width={size}
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      <title>{TITLE}</title>
      <path d="YOUR_SVG_PATH_DATA" />
    </svg>
  );
});

export default Icon;