Energy Icons

A free, open-source icon library for everyone, with deeper coverage for energy, climate and infrastructure.

View icons
Docs/Contributing an icon

Contributing an icon

Anyone can suggest or draw an icon. Every addition arrives as a pull request and is reviewed against the design principles before it ships.

Ask for an icon

The quickest route is an icon request. Describe what the symbol needs to show and where you’d use it. Requests are drawn in the order that best serves the set. Sponsoring doesn’t jump the queue, and the icons stay free either way.

Draw one yourself

Fork the repository, add the icon on a branch, and open a pull request. Read the design principles first. An icon that breaks them will be asked to change before it can merge.

  1. Draw both masters in Figma

    Design the icon on a 20×20 frame with a 1px stroke and on a 48×48 frame with a 2px stroke. Outline strokes, flatten, and use a single fill. Export each frame as SVG with the full frame as the viewBox. Draw the Bold weight the same way with a 1.25px stroke at 20 and a 2.5px stroke at 48.

  2. Add the files to /icons/<slug>/

    The slug is kebab-case and becomes the icon’s permanent name. Keep viewBox as 0 0 20 20 / 0 0 48 48 and fills as currentColor. Don’t edit the path data.

    icons/
      heat-network/
        20.svg
        48.svg
        20-bold.svg
        48-bold.svg
  3. Add one metadata entry

    Add an entry to src/data/icons.ts. Its position in the list sets its position in the grid. category is one of the ids in src/data/categories.ts.

    {
      slug: "heat-network",
      name: "Heat network",
      category: "heat-buildings",
      keywords: ["district heating", "heat network", "pipes"],
    },
  4. Run the checks and open a pull request

    npm run icons checks that every entry has its files and that no SVG contains scripts, styles or stray strokes. npm test confirms the output matches the source byte for byte. CI runs both on your pull request.

    npm run icons   # validate + regenerate
    npm test        # byte-identical output check

Review and release

The maintainer reviews every pull request for drawing quality, consistency with the rest of the set, and a clear meaning. Nothing reaches the site or the npm package until it is merged. Merged icons ship in the next release.

By contributing you agree your icon is your own work and is released under the project’s MIT License. Don’t submit drawings traced from other icon sets or logos you don’t have the right to share.