# usb icon Usb. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/usb - Category: Connectivity - Use it for: usb, usb connection, usb connected, usb device - Tags: usb, port, connector, cable, peripheral, trident - Component name: UsbIcon - Added: 2026-10-14 ## Alternatives - `usb-drive`: a USB stick (usb-drive) - `usb-c-port`: the USB-C port (usb-c) ## Also fits - cable: a USB connection (usb) - usb c: USB in general: the trident (usb) - usb drive: a USB connection (usb-connection) ## Files Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. - line-round: https://gentleface.com/svg/line-round/16/usb.svg · PNG https://gentleface.com/png/line-round/16/usb.png · https://gentleface.com/png/line-round/32/usb.png · https://gentleface.com/png/line-round/48/usb.png - line-soft: https://gentleface.com/svg/line-soft/16/usb.svg · PNG https://gentleface.com/png/line-soft/16/usb.png · https://gentleface.com/png/line-soft/32/usb.png · https://gentleface.com/png/line-soft/48/usb.png - line-sharp: https://gentleface.com/svg/line-sharp/16/usb.svg · PNG https://gentleface.com/png/line-sharp/16/usb.png · https://gentleface.com/png/line-sharp/32/usb.png · https://gentleface.com/png/line-sharp/48/usb.png - solid-round: https://gentleface.com/svg/solid-round/16/usb.svg · PNG https://gentleface.com/png/solid-round/16/usb.png · https://gentleface.com/png/solid-round/32/usb.png · https://gentleface.com/png/solid-round/48/usb.png - solid-soft: https://gentleface.com/svg/solid-soft/16/usb.svg · PNG https://gentleface.com/png/solid-soft/16/usb.png · https://gentleface.com/png/solid-soft/32/usb.png · https://gentleface.com/png/solid-soft/48/usb.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/usb.svg · PNG https://gentleface.com/png/solid-sharp/16/usb.png · https://gentleface.com/png/solid-sharp/32/usb.png · https://gentleface.com/png/solid-sharp/48/usb.png The SVG of every style: https://gentleface.com/icons/usb.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "usb" (line-round), MIT. https://gentleface.com/icons/usb import type { SVGProps } from 'react'; export function UsbIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "usb" (line-round), MIT. https://gentleface.com/icons/usb. Takes the text color. */ .icon-usb { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M10 4L8 4L8 7L12 7L12 6L11 6L11 3L14 3L14 6L13 6L13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L8 8L8 10.55C8 10.799 7.799 11 7.55 11L7.502 11C7.915 11 8.268 11.147 8.561 11.439C8.854 11.732 9 12.086 9 12.5C9 12.914 8.854 13.268 8.561 13.561C8.268 13.854 7.914 14 7.5 14C7.086 14 6.732 13.854 6.439 13.561C6.146 13.268 6 12.914 6 12.5C6 12.086 6.146 11.732 6.439 11.439C6.732 11.146 7.086 11 7.5 11L7.45 11C7.201 11 7 10.799 7 10.55L7 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5L2 7.45C2 7.201 2.201 7 2.45 7L2.491 7L2.5 7C2.085 6.999 1.731 6.853 1.439 6.56C1.146 6.267 1 5.914 1 5.5C1 5.086 1.146 4.732 1.439 4.439C1.732 4.146 2.086 4 2.5 4C2.914 4 3.268 4.146 3.561 4.439C3.854 4.732 4 5.086 4 5.5C4 5.914 3.854 6.267 3.561 6.56C3.269 6.853 2.916 7 2.502 7L2.55 7C2.799 7 3 7.201 3 7.45L3 9L7 9L7 4L5 4L7.146 1.854L7.147 1.853L7.5 1.5L10 4Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M10 4L8 4L8 7L12 7L12 6L11 6L11 3L14 3L14 6L13 6L13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L8 8L8 10.55C8 10.799 7.799 11 7.55 11L7.502 11C7.915 11 8.268 11.147 8.561 11.439C8.854 11.732 9 12.086 9 12.5C9 12.914 8.854 13.268 8.561 13.561C8.268 13.854 7.914 14 7.5 14C7.086 14 6.732 13.854 6.439 13.561C6.146 13.268 6 12.914 6 12.5C6 12.086 6.146 11.732 6.439 11.439C6.732 11.146 7.086 11 7.5 11L7.45 11C7.201 11 7 10.799 7 10.55L7 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5L2 7.45C2 7.201 2.201 7 2.45 7L2.491 7L2.5 7C2.085 6.999 1.731 6.853 1.439 6.56C1.146 6.267 1 5.914 1 5.5C1 5.086 1.146 4.732 1.439 4.439C1.732 4.146 2.086 4 2.5 4C2.914 4 3.268 4.146 3.561 4.439C3.854 4.732 4 5.086 4 5.5C4 5.914 3.854 6.267 3.561 6.56C3.269 6.853 2.916 7 2.502 7L2.55 7C2.799 7 3 7.201 3 7.45L3 9L7 9L7 4L5 4L7.146 1.854L7.147 1.853L7.5 1.5L10 4Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M10 4L8 4L8 7L12 7L12 6L11 6L11 3L14 3L14 6L13 6L13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L8 8L8 10.55C8 10.799 7.799 11 7.55 11L7.502 11C7.915 11 8.268 11.147 8.561 11.439C8.854 11.732 9 12.086 9 12.5C9 12.914 8.854 13.268 8.561 13.561C8.268 13.854 7.914 14 7.5 14C7.086 14 6.732 13.854 6.439 13.561C6.146 13.268 6 12.914 6 12.5C6 12.086 6.146 11.732 6.439 11.439C6.732 11.146 7.086 11 7.5 11L7.45 11C7.201 11 7 10.799 7 10.55L7 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5L2 7.45C2 7.201 2.201 7 2.45 7L2.491 7L2.5 7C2.085 6.999 1.731 6.853 1.439 6.56C1.146 6.267 1 5.914 1 5.5C1 5.086 1.146 4.732 1.439 4.439C1.732 4.146 2.086 4 2.5 4C2.914 4 3.268 4.146 3.561 4.439C3.854 4.732 4 5.086 4 5.5C4 5.914 3.854 6.267 3.561 6.56C3.269 6.853 2.916 7 2.502 7L2.55 7C2.799 7 3 7.201 3 7.45L3 9L7 9L7 4L5 4L7.146 1.854L7.147 1.853L7.5 1.5L10 4Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "usb" (line-round), MIT. https://gentleface.com/icons/usb import SwiftUI struct UsbIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 10, y: 4)) p.addLine(to: CGPoint(x: 8, y: 4)) p.addLine(to: CGPoint(x: 8, y: 7)) p.addLine(to: CGPoint(x: 12, y: 7)) p.addLine(to: CGPoint(x: 12, y: 6)) p.addLine(to: CGPoint(x: 11, y: 6)) p.addLine(to: CGPoint(x: 11, y: 3)) p.addLine(to: CGPoint(x: 14, y: 3)) p.addLine(to: CGPoint(x: 14, y: 6)) p.addLine(to: CGPoint(x: 13, y: 6)) p.addLine(to: CGPoint(x: 13, y: 7.5)) p.addCurve(to: CGPoint(x: 12.856, y: 7.856), control1: CGPoint(x: 13, y: 7.641), control2: CGPoint(x: 12.952, y: 7.759)) p.addCurve(to: CGPoint(x: 12.5, y: 8), control1: CGPoint(x: 12.759, y: 7.952), control2: CGPoint(x: 12.641, y: 8)) p.addLine(to: CGPoint(x: 8, y: 8)) p.addLine(to: CGPoint(x: 8, y: 10.55)) p.addCurve(to: CGPoint(x: 7.55, y: 11), control1: CGPoint(x: 8, y: 10.799), control2: CGPoint(x: 7.799, y: 11)) p.addLine(to: CGPoint(x: 7.502, y: 11)) p.addCurve(to: CGPoint(x: 8.561, y: 11.439), control1: CGPoint(x: 7.915, y: 11), control2: CGPoint(x: 8.268, y: 11.147)) p.addCurve(to: CGPoint(x: 9, y: 12.5), control1: CGPoint(x: 8.854, y: 11.732), control2: CGPoint(x: 9, y: 12.086)) p.addCurve(to: CGPoint(x: 8.561, y: 13.561), control1: CGPoint(x: 9, y: 12.914), control2: CGPoint(x: 8.854, y: 13.268)) p.addCurve(to: CGPoint(x: 7.5, y: 14), control1: CGPoint(x: 8.268, y: 13.854), control2: CGPoint(x: 7.914, y: 14)) p.addCurve(to: CGPoint(x: 6.439, y: 13.561), control1: CGPoint(x: 7.086, y: 14), control2: CGPoint(x: 6.732, y: 13.854)) p.addCurve(to: CGPoint(x: 6, y: 12.5), control1: CGPoint(x: 6.146, y: 13.268), control2: CGPoint(x: 6, y: 12.914)) p.addCurve(to: CGPoint(x: 6.439, y: 11.439), control1: CGPoint(x: 6, y: 12.086), control2: CGPoint(x: 6.146, y: 11.732)) p.addCurve(to: CGPoint(x: 7.5, y: 11), control1: CGPoint(x: 6.732, y: 11.146), control2: CGPoint(x: 7.086, y: 11)) p.addLine(to: CGPoint(x: 7.45, y: 11)) p.addCurve(to: CGPoint(x: 7, y: 10.55), control1: CGPoint(x: 7.201, y: 11), control2: CGPoint(x: 7, y: 10.799)) p.addLine(to: CGPoint(x: 7, y: 10)) p.addLine(to: CGPoint(x: 2.5, y: 10)) p.addCurve(to: CGPoint(x: 2.144, y: 9.856), control1: CGPoint(x: 2.359, y: 10), control2: CGPoint(x: 2.241, y: 9.952)) p.addCurve(to: CGPoint(x: 2, y: 9.5), control1: CGPoint(x: 2.048, y: 9.759), control2: CGPoint(x: 2, y: 9.641)) p.addLine(to: CGPoint(x: 2, y: 7.45)) p.addCurve(to: CGPoint(x: 2.45, y: 7), control1: CGPoint(x: 2, y: 7.201), control2: CGPoint(x: 2.201, y: 7)) p.addLine(to: CGPoint(x: 2.491, y: 7)) p.addLine(to: CGPoint(x: 2.5, y: 7)) p.addCurve(to: CGPoint(x: 1.439, y: 6.56), control1: CGPoint(x: 2.085, y: 6.999), control2: CGPoint(x: 1.731, y: 6.853)) p.addCurve(to: CGPoint(x: 1, y: 5.5), control1: CGPoint(x: 1.146, y: 6.267), control2: CGPoint(x: 1, y: 5.914)) p.addCurve(to: CGPoint(x: 1.439, y: 4.439), control1: CGPoint(x: 1, y: 5.086), control2: CGPoint(x: 1.146, y: 4.732)) p.addCurve(to: CGPoint(x: 2.5, y: 4), control1: CGPoint(x: 1.732, y: 4.146), control2: CGPoint(x: 2.086, y: 4)) p.addCurve(to: CGPoint(x: 3.561, y: 4.439), control1: CGPoint(x: 2.914, y: 4), control2: CGPoint(x: 3.268, y: 4.146)) p.addCurve(to: CGPoint(x: 4, y: 5.5), control1: CGPoint(x: 3.854, y: 4.732), control2: CGPoint(x: 4, y: 5.086)) p.addCurve(to: CGPoint(x: 3.561, y: 6.56), control1: CGPoint(x: 4, y: 5.914), control2: CGPoint(x: 3.854, y: 6.267)) p.addCurve(to: CGPoint(x: 2.502, y: 7), control1: CGPoint(x: 3.269, y: 6.853), control2: CGPoint(x: 2.916, y: 7)) p.addLine(to: CGPoint(x: 2.55, y: 7)) p.addCurve(to: CGPoint(x: 3, y: 7.45), control1: CGPoint(x: 2.799, y: 7), control2: CGPoint(x: 3, y: 7.201)) p.addLine(to: CGPoint(x: 3, y: 9)) p.addLine(to: CGPoint(x: 7, y: 9)) p.addLine(to: CGPoint(x: 7, y: 4)) p.addLine(to: CGPoint(x: 5, y: 4)) p.addLine(to: CGPoint(x: 7.146, y: 1.854)) p.addLine(to: CGPoint(x: 7.147, y: 1.853)) p.addLine(to: CGPoint(x: 7.5, y: 1.5)) p.addLine(to: CGPoint(x: 10, y: 4)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // UsbIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "usb" (line-round), MIT. https://gentleface.com/icons/usb import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val UsbIcon: ImageVector by lazy { ImageVector.Builder( name = "usb", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M10 4L8 4L8 7L12 7L12 6L11 6L11 3L14 3L14 6L13 6L13 7.5C13 7.641 12.952 7.759 12.856 7.856C12.759 7.952 12.641 8 12.5 8L8 8L8 10.55C8 10.799 7.799 11 7.55 11L7.502 11C7.915 11 8.268 11.147 8.561 11.439C8.854 11.732 9 12.086 9 12.5C9 12.914 8.854 13.268 8.561 13.561C8.268 13.854 7.914 14 7.5 14C7.086 14 6.732 13.854 6.439 13.561C6.146 13.268 6 12.914 6 12.5C6 12.086 6.146 11.732 6.439 11.439C6.732 11.146 7.086 11 7.5 11L7.45 11C7.201 11 7 10.799 7 10.55L7 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856C2.048 9.759 2 9.641 2 9.5L2 7.45C2 7.201 2.201 7 2.45 7L2.491 7L2.5 7C2.085 6.999 1.731 6.853 1.439 6.56C1.146 6.267 1 5.914 1 5.5C1 5.086 1.146 4.732 1.439 4.439C1.732 4.146 2.086 4 2.5 4C2.914 4 3.268 4.146 3.561 4.439C3.854 4.732 4 5.086 4 5.5C4 5.914 3.854 6.267 3.561 6.56C3.269 6.853 2.916 7 2.502 7L2.55 7C2.799 7 3 7.201 3 7.45L3 9L7 9L7 4L5 4L7.146 1.854L7.147 1.853L7.5 1.5L10 4Z"), fill = SolidColor(Color.Black), ).build() } // Icon(UsbIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "usb" (line-round), MIT. https://gentleface.com/icons/usb import 'package:flutter/widgets.dart'; class UsbIcon extends StatelessWidget { const UsbIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _UsbIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _UsbIconPainter extends CustomPainter { _UsbIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(10, 4) ..lineTo(8, 4) ..lineTo(8, 7) ..lineTo(12, 7) ..lineTo(12, 6) ..lineTo(11, 6) ..lineTo(11, 3) ..lineTo(14, 3) ..lineTo(14, 6) ..lineTo(13, 6) ..lineTo(13, 7.5) ..cubicTo(13, 7.641, 12.952, 7.759, 12.856, 7.856) ..cubicTo(12.759, 7.952, 12.641, 8, 12.5, 8) ..lineTo(8, 8) ..lineTo(8, 10.55) ..cubicTo(8, 10.799, 7.799, 11, 7.55, 11) ..lineTo(7.502, 11) ..cubicTo(7.915, 11, 8.268, 11.147, 8.561, 11.439) ..cubicTo(8.854, 11.732, 9, 12.086, 9, 12.5) ..cubicTo(9, 12.914, 8.854, 13.268, 8.561, 13.561) ..cubicTo(8.268, 13.854, 7.914, 14, 7.5, 14) ..cubicTo(7.086, 14, 6.732, 13.854, 6.439, 13.561) ..cubicTo(6.146, 13.268, 6, 12.914, 6, 12.5) ..cubicTo(6, 12.086, 6.146, 11.732, 6.439, 11.439) ..cubicTo(6.732, 11.146, 7.086, 11, 7.5, 11) ..lineTo(7.45, 11) ..cubicTo(7.201, 11, 7, 10.799, 7, 10.55) ..lineTo(7, 10) ..lineTo(2.5, 10) ..cubicTo(2.359, 10, 2.241, 9.952, 2.144, 9.856) ..cubicTo(2.048, 9.759, 2, 9.641, 2, 9.5) ..lineTo(2, 7.45) ..cubicTo(2, 7.201, 2.201, 7, 2.45, 7) ..lineTo(2.491, 7) ..lineTo(2.5, 7) ..cubicTo(2.085, 6.999, 1.731, 6.853, 1.439, 6.56) ..cubicTo(1.146, 6.267, 1, 5.914, 1, 5.5) ..cubicTo(1, 5.086, 1.146, 4.732, 1.439, 4.439) ..cubicTo(1.732, 4.146, 2.086, 4, 2.5, 4) ..cubicTo(2.914, 4, 3.268, 4.146, 3.561, 4.439) ..cubicTo(3.854, 4.732, 4, 5.086, 4, 5.5) ..cubicTo(4, 5.914, 3.854, 6.267, 3.561, 6.56) ..cubicTo(3.269, 6.853, 2.916, 7, 2.502, 7) ..lineTo(2.55, 7) ..cubicTo(2.799, 7, 3, 7.201, 3, 7.45) ..lineTo(3, 9) ..lineTo(7, 9) ..lineTo(7, 4) ..lineTo(5, 4) ..lineTo(7.146, 1.854) ..lineTo(7.147, 1.853) ..lineTo(7.5, 1.5) ..lineTo(10, 4) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_UsbIconPainter old) => old.color != color; } ```