Installation

React

Requires React 18 or newer.

npm install energy-icons

The name-based component includes every icon. Use it when the icon is chosen at runtime.

import { Icon } from "energy-icons/icon";

<Icon name="pylon" size={32} weight="bold" />

To ship a single drawing, import that icon. The slug is the path, and the component name is the slug in Pascal case.

import { Pylon } from "energy-icons/icons/pylon";

<Pylon size={32} />

Icon font

For Webflow, WordPress or plain HTML. Add the stylesheet once, then add two classes to any element. No build step and no React.

<link rel="stylesheet" href="https://unpkg.com/energy-icons@1/font/style.css" />

<i class="ei ei-wind"></i>     <!-- regular -->
<i class="ei-b ei-wind"></i>   <!-- bold -->

The class is ei- plus the icon’s slug. Icons take their size from font-size and their colour from color. For one weight only, link font/regular/style.css or font/bold/style.css. The font uses the 20px master, so for large hero icons the SVG or React component gives the 48px detail.

SVG files

Every master is also a file. Download the zip from the toolbar, or copy one SVG from an icon’s detail view. In the npm package the same files live at energy-icons/svg/<slug>/.

energy-icons/svg/pylon/20.svg
energy-icons/svg/pylon/48.svg
energy-icons/svg/pylon/20-bold.svg
energy-icons/svg/pylon/48-bold.svg

Figma

Install the Energy Icons plugin from Figma Community. Search the set, pick a size, weight and colour, then click an icon to insert it, or drag it onto the canvas. The right master is chosen for the size, and new icons appear as soon as they ship.

Without React

Any framework, or plain HTML, can use the SVGs. Paste the markup inline to inherit the text colour, since every fill is currentColor. Pick the 20 master below 32px and the 48 master from 32px up.

<button>
  <svg width="16" height="16" viewBox="0 0 20 20" aria-hidden="true">…</svg>
  Charge
</button>

An <img> can’t pick up colour from the page and renders black. To tint a file loaded by URL, use it as a CSS mask. The files are also served from the npm package over a CDN.

.icon-pylon {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("https://cdn.jsdelivr.net/npm/energy-icons@1/svg/pylon/20.svg") center / contain no-repeat;
}