@evicons/react

Website: evicons.dev

React components for EVicons, MIT-licensed outline icons for e-mobility and EV charging: charging stations, connector faces, AC/DC and power, energy, vehicles, payment, charge point status and map markers.

EVicons covers only e-mobility; keep using a general icon set such as Lucide for general UI icons. Icons use currentColor and contain no colours. Raw SVG files, a sprite and metadata are in @evicons/svg.

Installation

npm install @evicons/react

Usage

import { PlugType2 } from '@evicons/react'

export function Connector() {
  return (
    <span>
      <PlugType2 size={20} title="Type 2" /> Type 2 · 22 kW
    </span>
  )
}

Every icon is its own module and the package has sideEffects: false, so bundlers only include the icons you import. A single icon can also be imported directly, as a named or default export:

import PlugType2 from '@evicons/react/icons/plug-type-2'

Props

The prop type is exported as EvIconProps, the component type as EvIconComponent.

Colour

Icons draw with currentColor. Set the CSS color of the icon or of a parent:

<StatusAvailable className="text-green-600" title="Available" />

absoluteStrokeWidth

By default the stroke scales with the icon: at size={12} a stroke of 1.5 is drawn 0.75 px wide. With absoluteStrokeWidth, every shape gets vector-effect="non-scaling-stroke", so the stroke is drawn strokeWidth screen pixels wide whatever the rendered size.

Because this is done by the browser and not computed from size, it also works when the size comes from CSS (size="1em", className="size-4", non-square sizes). Shapes you pass as children are not changed.

Small sizes

At 16 px the default stroke is drawn 1 px wide. Keep it at full weight with absoluteStrokeWidth and strokeWidth={1.5}, or with strokeWidth={2} when you do not use absoluteStrokeWidth. Next to Lucide icons (stroke 2), set strokeWidth={2} so both sets look equally heavy. This thickens the stroke relative to the drawing, so tight gaps such as the cut-out around the small bolt may close; check the icon at that size.

Not every icon is readable at 16 px. Use these from 20 px: the connector faces (category connector: plug-type-1, plug-type-2, plug-ccs1, plug-ccs2, plug-chademo, plug-nacs, plug-gbt-dc, plug-mcs, plug-schuko, plug-cee-blue, plug-cee-red), the letter icons (current-ac, current-dc, power-kw, parking-charging), bike-electric, motorcycle-electric and charging-availability. Use the map markers (marker-*) from 24 px.

Accessibility

Icons are decorative by default: the <svg> gets aria-hidden="true" and no role. Icons complement visible text; when an icon stands alone and carries meaning, give it an accessible name. As soon as it has one, aria-hidden is dropped and role="img" is set.

If several are given, this order applies:

1. aria-labelledby (yours): kept as is.
2. aria-label: used as the name. A title is still rendered as <title> but not referenced.
3. title: rendered as the first child <title> with an id from React's useId (unique and stable in server rendering) and referenced with aria-labelledby.
4. None of these: decorative (aria-hidden="true").

An explicit role or aria-hidden that you pass always wins over the defaults.

<StatusFaulted title="Faulted" />                    // role="img", named "Faulted"
<StatusFaulted aria-label="Charge point faulted" />  // role="img", named by aria-label
<StatusFaulted />                                    // aria-hidden="true"

Icons complement text

Do not use an icon as the only carrier of information. At 16 px the contacts of a connector face render as similar dots, so faces that share a part are hard to tell apart: plug-type-2 and plug-ccs2 differ only in the DC part below the Type 2 contacts, plug-type-1 and plug-ccs1 only in the DC pair below the Type 1 contacts. plug-gbt-dc differs from plug-type-2 mainly by the two large DC rings and the higher flat edge. Likewise plug-type-1, plug-chademo and plug-schuko look alike at 16 px (round faces), and plug-cee-blue resembles plug-type-1 (two contacts above a larger one; the CEE face has the key at the bottom). Always show the connector name next to the icon, for example "Type 2 · 22 kW". The same applies to status icons: show the status as text or at least as an accessible name.

Status overlay pattern

To combine a status with another icon, place a small status icon (half the base size, with absoluteStrokeWidth) absolutely in the bottom-right corner. See the example in the repository README.

Icons

Connectors

Stations and sites

Power and energy

Vehicles

Payment

Status

Status icons share a round frame; the sign inside carries the meaning.

"Faulted" (the station reports an error) and "out of service" (taken out of service by the operator) are different states; use the one your data actually reports.

Markers

Map pins with a sign in the head (the cluster pin leaves it empty for a count), for 24 to 40 px; see Map markers for filled mode.

The charging marker is named marker-charging (MarkerCharging), not marker, so that it does not clash with the Marker component of map libraries (MapLibre, Mapbox, Leaflet, Google Maps).

Map markers

The first <path> of every marker-* icon is the pin, so markers can be drawn filled with CSS: the pin in your colour, the sign in white.

.marker svg > path:first-of-type { fill: currentColor; }
.marker svg > :not(path:first-of-type) { stroke: #fff; }
.marker svg > [fill] { fill: #fff; }

Use path:first-of-type, not :first-child: with title, the component renders a <title> as the first child. The third rule turns the solid bolt of marker-charging white: since 0.7.0 every lightning bolt is solid and carries fill="currentColor". For map libraries that draw images (MapLibre addImage), see the recipe in the repository README.

For a cluster, use marker-cluster, the empty pin, and draw the count in its head; for the selected station, draw its own marker larger (40 px instead of 32) and with a white ring, not only in another colour. The repository README shows both, for MapLibre, Leaflet and React, under Clusters and selection.

Compatibility

License

MIT