DEV Community

albert nahas
albert nahas

Posted on • Originally published at leandine.hashnode.dev

Generating Icons from Your Terminal: A CLI Approach

#cli #devops #productivity #tutorial

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 is a powerful CLI tool for this.

Install SVGO:

npm install -g svgo
Enter fullscreen mode Exit fullscreen mode

Optimize a Single Icon:

svgo input-icon.svg -o output-icon.min.svg
Enter fullscreen mode Exit fullscreen mode

Batch Optimize All SVGs in a Directory:

svgo -f ./icons/raw -o ./icons/optimized
Enter fullscreen mode Exit fullscreen mode

This can be scripted as a pre-build step:

// package.json
"scripts": {
  "icons:optimize": "svgo -f ./icons/raw -o ./icons/optimized"
}
Enter fullscreen mode Exit fullscreen mode

Example 2: Generating PNGs from SVGs (Multiple Resolutions)

Some platforms (like mobile apps) require PNG icons at various sizes. svgexport makes this trivial.

Install svgexport:

npm install -g svgexport
Enter fullscreen mode Exit fullscreen mode

Export to Multiple Resolutions:

svgexport icon.svg icon@1x.png 100:100
svgexport icon.svg icon@2x.png 200:200
svgexport icon.svg icon@3x.png 300:300
Enter fullscreen mode Exit fullscreen mode

Batch Export with a Config File:

Create a file called svgexport-config.json:

[
  ["icon.svg", "icon@1x.png", "100:100"],
  ["icon.svg", "icon@2x.png", "200:200"],
  ["icon.svg", "icon@3x.png", "300:300"]
]
Enter fullscreen mode Exit fullscreen mode

Then run:

svgexport --input svgexport-config.json
Enter fullscreen mode Exit fullscreen mode

Example 3: Creating Icon Fonts from SVGs

If your design system relies on icon fonts, tools like svgicons2svgfont and gulp-iconfont are ideal.

Using svgicons2svgfont:

npm install -g svgicons2svgfont
Enter fullscreen mode Exit fullscreen mode

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

svgicons2svgfont ./icons/svg/*.svg > ./icons/font/iconfont.svg
Enter fullscreen mode Exit fullscreen mode

You can further convert the SVG font to TTF, WOFF, etc., using additional CLI utilities like fontforge.

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:

icogenie generate --prompt "shopping cart outline" --output ./icons/generated
Enter fullscreen mode Exit fullscreen mode

Or, to batch-generate icons from a list:

icogenie batch --input prompts.txt --output ./icons/generated
Enter fullscreen mode Exit fullscreen mode

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):

"scripts": {
  "icons:generate": "npm run icons:optimize && npm run icons:export"
}
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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:

stages:
  - icons

generate_icons:
  image: node:18
  stage: icons
  script:
    - npm install
    - npm run icons:generate
  artifacts:
    paths:
      - icons/optimized/
      - icons/exports/
Enter fullscreen mode Exit fullscreen mode

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:

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.');
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)