# Generating Icons from Your Terminal: A CLI Approach

Generating icons is a staple in modern web and app development, but doing it manually or through graphical interfaces can slow down workflows—especially when speed and reproducibility are essential. Whether you're developing a design system, supporting multiple platforms, or just want to keep your assets consistent, automating icon generation right from your terminal is a game-changer. Embracing a CLI icon generator not only saves time but also fits seamlessly into CI/CD pipelines, making icon automation a breeze for teams of any size.

## Why Use a CLI Icon Generator?

The demand for scalable and consistent icons has never been higher. With projects targeting multiple devices, resolutions, and branding requirements, managing these assets can become chaotic without the right tools. Here’s why a command-line approach makes sense:

- **Automation Friendly**: Easily integrate into build scripts, pre-commit hooks, and CI/CD pipelines.
- **Consistency**: Ensure every environment generates the exact same set of icons, reducing manual errors.
- **Performance**: Generate only what you need, when you need it, without relying on heavy graphical tools.

Let’s explore how to automate icon creation from your terminal, including practical code examples and tool recommendations.

## Popular CLI Icon Generator Tools

Several CLI tools allow for efficient icon automation. Some focus on manipulating SVGs, others on generating icon fonts, and some offer AI-powered SVG generation. Here are a few favorites among developers:

- **svgicons2svgfont**: Converts SVG icons to icon fonts.
- **svgexport**: Renders SVG files to PNG or JPEG at any size.
- **svgo**: Optimizes SVG files for size and performance.
- **gulp-iconfont**: Integrates with Gulp for font generation.
- **Icon Genie**, **IcoGenie**, and similar tools: Automate and even generate icons using AI or templates.

We’ll walk through a few common scenarios below.

## Setting Up Icon Automation in Your Project

### Example 1: Automated SVG Optimization

Optimizing SVGs before bundling them into your applications ensures fast load times and crisp rendering. [SVGO](https://github.com/svg/svgo) is a powerful CLI tool for this.

**Install SVGO:**

```bash
npm install -g svgo
```

**Optimize a Single Icon:**

```bash
svgo input-icon.svg -o output-icon.min.svg
```

**Batch Optimize All SVGs in a Directory:**

```bash
svgo -f ./icons/raw -o ./icons/optimized
```

This can be scripted as a pre-build step:

```json
// package.json
"scripts": {
  "icons:optimize": "svgo -f ./icons/raw -o ./icons/optimized"
}
```

### Example 2: Generating PNGs from SVGs (Multiple Resolutions)

Some platforms (like mobile apps) require PNG icons at various sizes. [svgexport](https://github.com/shakiba/svgexport) makes this trivial.

**Install svgexport:**

```bash
npm install -g svgexport
```

**Export to Multiple Resolutions:**

```bash
svgexport icon.svg icon@1x.png 100:100
svgexport icon.svg icon@2x.png 200:200
svgexport icon.svg icon@3x.png 300:300
```

**Batch Export with a Config File:**

Create a file called `svgexport-config.json`:

```json
[
  ["icon.svg", "icon@1x.png", "100:100"],
  ["icon.svg", "icon@2x.png", "200:200"],
  ["icon.svg", "icon@3x.png", "300:300"]
]
```

Then run:

```bash
svgexport --input svgexport-config.json
```

### Example 3: Creating Icon Fonts from SVGs

If your design system relies on icon fonts, tools like [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont) and [gulp-iconfont](https://github.com/nfroidure/gulp-iconfont) are ideal.

**Using svgicons2svgfont:**

```bash
npm install -g svgicons2svgfont
```

Suppose you have several SVGs in `./icons/svg/`. Combine them into a font:

```bash
svgicons2svgfont ./icons/svg/*.svg > ./icons/font/iconfont.svg
```

You can further convert the SVG font to TTF, WOFF, etc., using additional CLI utilities like [fontforge](https://fontforge.org/).

### Example 4: AI-Powered Icon Generation

If you need to generate new icons from prompts or templates, AI-powered CLI icon generators such as tools like Icon Genie, IcoGenie, or SVG-CLI come in handy. These tools can automate the process of creating SVG icons based on user input or configuration files, fitting naturally into CI/CD workflows.

For example, you might use a command like:

```bash
icogenie generate --prompt "shopping cart outline" --output ./icons/generated
```

Or, to batch-generate icons from a list:

```bash
icogenie batch --input prompts.txt --output ./icons/generated
```

This approach is powerful for design systems evolving rapidly or when experimenting with variations.

## Integrating Icon Automation Into CI/CD Pipelines

Once your CLI icon generator workflow is established, integrating it into your continuous integration or deployment process ensures your icons are always up-to-date and consistent. Here’s how you might do it with common CI/CD platforms.

### Example: GitHub Actions Workflow

Suppose you have an `icons:generate` script in your `package.json` that runs your preferred CLI tool(s):

```json
"scripts": {
  "icons:generate": "npm run icons:optimize && npm run icons:export"
}
```

You can set up a workflow in `.github/workflows/icon-build.yml`:

```yaml
name: Generate and Optimize Icons

on:
  push:
    paths:
      - 'icons/raw/**'
      - '.github/workflows/icon-build.yml'
  pull_request:

jobs:
  build-icons:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm run icons:generate
      - name: Commit updated icons
        run: |
          git config --global user.name 'github-actions'
          git config --global user.email 'github-actions@github.com'
          git add icons/optimized icons/exports
          git commit -m "Auto-update icons" || echo "No changes to commit"
          git push
```

This workflow ensures that every time you update an icon in `icons/raw`, optimized and exported assets are regenerated and committed automatically.

### Example: GitLab CI/CD

A similar setup can be achieved in `.gitlab-ci.yml`:

```yaml
stages:
  - icons

generate_icons:
  image: node:18
  stage: icons
  script:
    - npm install
    - npm run icons:generate
  artifacts:
    paths:
      - icons/optimized/
      - icons/exports/
```

## Scripting Icon Generation: Practical TypeScript Example

For even more control, you might write custom scripts to orchestrate icon generation. Here’s a simple Node.js/TypeScript example that optimizes all SVGs in a directory and exports them as PNGs:

```typescript
import { execSync } from 'child_process';
import fs from 'fs';
import path from 'path';

const inputDir = './icons/raw';
const optimizedDir = './icons/optimized';
const outputDir = './icons/png';

fs.mkdirSync(optimizedDir, { recursive: true });
fs.mkdirSync(outputDir, { recursive: true });

const svgs = fs.readdirSync(inputDir).filter(f => f.endsWith('.svg'));

for (const file of svgs) {
  const inputPath = path.join(inputDir, file);
  const optimizedPath = path.join(optimizedDir, file);
  const pngPath = path.join(outputDir, file.replace('.svg', '.png'));

  // Optimize SVG
  execSync(`svgo "${inputPath}" -o "${optimizedPath}"`);

  // Export as PNG (100x100)
  execSync(`svgexport "${optimizedPath}" "${pngPath}" 100:100`);
}

console.log('Icons optimized and PNGs exported.');
```

With this approach, you can add any logic you need—such as generating multiple sizes or handling errors gracefully.

## Key Takeaways

- **CLI icon generators** bring speed, repeatability, and automation to your icon workflows.
- Tools like svgo, svgexport, svgicons2svgfont, and AI-powered generators enable a wide array of use cases, from optimization to creative generation.
- Integrating icon automation into CI/CD ensures consistency and removes manual steps from your deployment process.
- With simple scripting, you can tailor icon automation to your exact needs, scaling from solo side projects to enterprise-grade design systems.

Adopting terminal tools for icon automation doesn’t just save time—it lifts the quality and reliability of your design assets to a whole new level. Whether you’re a solo developer or leading a team, it’s a smart investment in the health of your codebase and the satisfaction of your users.