Gentleface › Transportation › ev-plug

ev-plug icon

Ev plug: ev connector, charging connector, charging cable, charge port. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated ev-plug-seat · line-round

The plug is pulled out to the right with the cable dragging after it, then pushed back in until it latches with a small knock. Three pulses of charge run up the cable into the plug.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.25 s to 2.75 s. Examples and helper.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.052 3.105C8.245 3.182 8.414 3.293 8.561 3.439C8.707 3.586 8.818 3.755 8.895 3.948C8.965 4.125 9 4.309 9 4.5C9 4.754 9.049 4.998 9.146 5.233C9.243 5.467 9.381 5.674 9.561 5.854L12.854 9.146C13.026 9.319 13.16 9.516 13.257 9.74C13.362 9.982 13.414 10.236 13.414 10.5C13.414 10.764 13.362 11.018 13.257 11.26C13.228 11.327 13.196 11.391 13.16 11.453L14.854 13.146C14.951 13.244 15 13.362 15 13.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15C14.359 15 14.241 14.952 14.144 14.856C14.048 14.759 14 14.641 14 14.5L14 13.707L12.453 12.16C12.391 12.196 12.327 12.228 12.26 12.257C12.018 12.362 11.764 12.414 11.5 12.414C11.236 12.414 10.982 12.362 10.74 12.257C10.516 12.16 10.319 12.026 10.146 11.854L7.854 9.561C7.674 9.381 7.467 9.243 7.233 9.146C6.998 9.049 6.754 9 6.5 9L5 9C4.746 9 4.5 8.953 4.264 8.86C4.007 8.758 3.781 8.609 3.586 8.414C3.391 8.219 3.242 7.993 3.14 7.736C3.047 7.5 3 7.254 3 7L3 8L1 8L1 4L1.499 4L1.5 4L3 4L3 5C3 4.746 3.047 4.5 3.14 4.264C3.242 4.007 3.391 3.781 3.586 3.586C3.781 3.391 4.007 3.242 4.264 3.14C4.5 3.047 4.746 3 5 3L7.5 3C7.691 3 7.875 3.035 8.052 3.105ZM4.293 4.293C4.098 4.488 4 4.724 4 5L4 7C4 7.276 4.098 7.512 4.293 7.707C4.488 7.902 4.724 8 5 8L6.5 8C6.886 8 7.258 8.074 7.615 8.222C7.972 8.37 8.287 8.58 8.561 8.854L10.854 11.146C11.032 11.325 11.248 11.414 11.5 11.414C11.752 11.414 11.968 11.325 12.146 11.146C12.325 10.968 12.414 10.752 12.414 10.5C12.414 10.248 12.325 10.032 12.146 9.854L8.854 6.561C8.58 6.287 8.37 5.972 8.222 5.615C8.074 5.258 8 4.886 8 4.5C8 4.362 7.951 4.244 7.854 4.146C7.756 4.049 7.638 4 7.5 4L5 4C4.724 4 4.488 4.098 4.293 4.293Z"/></svg>

React

// Gentleface "ev-plug" (line-round), MIT. https://gentleface.com/icons/ev-plug
import type { SVGProps } from 'react';

export function EvPlugIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M8.052 3.105C8.245 3.182 8.414 3.293 8.561 3.439C8.707 3.586 8.818 3.755 8.895 3.948C8.965 4.125 9 4.309 9 4.5C9 4.754 9.049 4.998 9.146 5.233C9.243 5.467 9.381 5.674 9.561 5.854L12.854 9.146C13.026 9.319 13.16 9.516 13.257 9.74C13.362 9.982 13.414 10.236 13.414 10.5C13.414 10.764 13.362 11.018 13.257 11.26C13.228 11.327 13.196 11.391 13.16 11.453L14.854 13.146C14.951 13.244 15 13.362 15 13.5L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15C14.359 15 14.241 14.952 14.144 14.856C14.048 14.759 14 14.641 14 14.5L14 13.707L12.453 12.16C12.391 12.196 12.327 12.228 12.26 12.257C12.018 12.362 11.764 12.414 11.5 12.414C11.236 12.414 10.982 12.362 10.74 12.257C10.516 12.16 10.319 12.026 10.146 11.854L7.854 9.561C7.674 9.381 7.467 9.243 7.233 9.146C6.998 9.049 6.754 9 6.5 9L5 9C4.746 9 4.5 8.953 4.264 8.86C4.007 8.758 3.781 8.609 3.586 8.414C3.391 8.219 3.242 7.993 3.14 7.736C3.047 7.5 3 7.254 3 7L3 8L1 8L1 4L1.499 4L1.5 4L3 4L3 5C3 4.746 3.047 4.5 3.14 4.264C3.242 4.007 3.391 3.781 3.586 3.586C3.781 3.391 4.007 3.242 4.264 3.14C4.5 3.047 4.746 3 5 3L7.5 3C7.691 3 7.875 3.035 8.052 3.105ZM4.293 4.293C4.098 4.488 4 4.724 4 5L4 7C4 7.276 4.098 7.512 4.293 7.707C4.488 7.902 4.724 8 5 8L6.5 8C6.886 8 7.258 8.074 7.615 8.222C7.972 8.37 8.287 8.58 8.561 8.854L10.854 11.146C11.032 11.325 11.248 11.414 11.5 11.414C11.752 11.414 11.968 11.325 12.146 11.146C12.325 10.968 12.414 10.752 12.414 10.5C12.414 10.248 12.325 10.032 12.146 9.854L8.854 6.561C8.58 6.287 8.37 5.972 8.222 5.615C8.074 5.258 8 4.886 8 4.5C8 4.362 7.951 4.244 7.854 4.146C7.756 4.049 7.638 4 7.5 4L5 4C4.724 4 4.488 4.098 4.293 4.293Z" />
    </svg>
  );
}

Vue

Vue: see /icons/ev-plug.md

Svelte

Svelte: see /icons/ev-plug.md

HTML img

HTML img: see /icons/ev-plug.md

CSS

CSS: see /icons/ev-plug.md

Data URL

Data URL: see /icons/ev-plug.md

Sprite

Sprite: see /icons/ev-plug.md

SwiftUI

SwiftUI: see /icons/ev-plug.md

Compose

Compose: see /icons/ev-plug.md

Android XML

Android XML: see /icons/ev-plug.md

Flutter

Flutter: see /icons/ev-plug.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { EvPlugIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

ev connector, charging connector, charging cable, charge port, charging port

Tags

ev-plug, ev-connector, charging-connector, charging-cable, charging-gun, ev, electric-vehicle, charge, connector

Category

Transportation

Component name

EvPlugIcon

History

2026-11-07 20 px drawn, 24 px drawn, added, released in 0.5.0

Since

version 0.5.0

Family 6

ev-plug-ccs ev-plug-ccs2 ev-plug-chademo ev-plug-j1772 ev-plug-nacs ev-plug-type2

More transportation icons

ambulance anchor barricade bike bike-bolt bike-off boom-barrier bus bus-alert bus-clock bus-off bus-side bus-stop cable-car car car-alert · all transportation icons

For agents

Metadata: /icons/ev-plug.json · Markdown: /icons/ev-plug.md · SVG: https://gentleface.com/svg/{style}/16/ev-plug.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/ev-plug.png

ev-plug icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp