gentleface

Gentleface › Maps & places › bridge

bridge icon

Bridge: bridge, crossing, overpass, viaduct. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

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="M3.856 13.856C3.759 13.952 3.641 14 3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 11L1.5 11C1.359 11 1.241 10.952 1.144 10.856C1.048 10.759 1 10.641 1 10.5C1 10.359 1.048 10.241 1.144 10.144C1.241 10.048 1.359 10 1.5 10L3 10L3 5.707L1.854 6.854C1.756 6.951 1.638 7 1.5 7C1.362 7 1.244 6.951 1.146 6.854C1.049 6.756 1 6.638 1 6.5C1 6.362 1.049 6.244 1.146 6.146L3 4.293L3 2.5C3 2.359 3.048 2.241 3.144 2.144C3.241 2.048 3.359 2 3.5 2C3.641 2 3.759 2.048 3.856 2.144C3.952 2.241 4 2.359 4 2.5L4 3.562C4.374 4.291 4.911 4.875 5.61 5.313C6.341 5.771 7.138 6 8 6C8.862 6 9.659 5.771 10.39 5.313C11.089 4.875 11.626 4.291 12 3.562L12 2.5C12 2.359 12.048 2.241 12.144 2.144C12.241 2.048 12.359 2 12.5 2C12.641 2 12.759 2.048 12.856 2.144C12.952 2.241 13 2.359 13 2.5L13 4.293L14.854 6.146C14.951 6.244 15 6.362 15 6.5C15 6.638 14.951 6.756 14.854 6.854C14.754 6.953 14.636 7.003 14.5 7.003C14.364 7.003 14.246 6.953 14.146 6.854L13 5.707L13 10L14.5 10C14.641 10 14.759 10.048 14.856 10.144C14.952 10.241 15 10.359 15 10.5C15 10.641 14.952 10.759 14.856 10.856C14.759 10.952 14.641 11 14.5 11L13 11L13 13.5C13 13.641 12.952 13.759 12.856 13.856C12.759 13.952 12.641 14 12.5 14C12.359 14 12.241 13.952 12.144 13.856C12.048 13.759 12 13.641 12 13.5L12 11L4 11L4 13.5C4 13.641 3.952 13.759 3.856 13.856ZM6 6.624C5.68 6.499 5.373 6.344 5.079 6.16C4.681 5.911 4.321 5.616 4 5.275L4 10L6 10L6 6.624ZM12 10L12 5.275C11.679 5.616 11.319 5.911 10.921 6.16C10.627 6.344 10.32 6.499 10 6.624L10 10L12 10ZM9 6.909C8.671 6.97 8.338 7 8 7C7.662 7 7.329 6.97 7 6.909L7 10L9 10L9 6.909Z"/></svg>
React
// Gentleface "bridge" (line-round), MIT. https://gentleface.com/icons/bridge
import type { SVGProps } from 'react';

export function BridgeIcon(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="M3.856 13.856C3.759 13.952 3.641 14 3.5 14C3.359 14 3.241 13.952 3.144 13.856C3.048 13.759 3 13.641 3 13.5L3 11L1.5 11C1.359 11 1.241 10.952 1.144 10.856C1.048 10.759 1 10.641 1 10.5C1 10.359 1.048 10.241 1.144 10.144C1.241 10.048 1.359 10 1.5 10L3 10L3 5.707L1.854 6.854C1.756 6.951 1.638 7 1.5 7C1.362 7 1.244 6.951 1.146 6.854C1.049 6.756 1 6.638 1 6.5C1 6.362 1.049 6.244 1.146 6.146L3 4.293L3 2.5C3 2.359 3.048 2.241 3.144 2.144C3.241 2.048 3.359 2 3.5 2C3.641 2 3.759 2.048 3.856 2.144C3.952 2.241 4 2.359 4 2.5L4 3.562C4.374 4.291 4.911 4.875 5.61 5.313C6.341 5.771 7.138 6 8 6C8.862 6 9.659 5.771 10.39 5.313C11.089 4.875 11.626 4.291 12 3.562L12 2.5C12 2.359 12.048 2.241 12.144 2.144C12.241 2.048 12.359 2 12.5 2C12.641 2 12.759 2.048 12.856 2.144C12.952 2.241 13 2.359 13 2.5L13 4.293L14.854 6.146C14.951 6.244 15 6.362 15 6.5C15 6.638 14.951 6.756 14.854 6.854C14.754 6.953 14.636 7.003 14.5 7.003C14.364 7.003 14.246 6.953 14.146 6.854L13 5.707L13 10L14.5 10C14.641 10 14.759 10.048 14.856 10.144C14.952 10.241 15 10.359 15 10.5C15 10.641 14.952 10.759 14.856 10.856C14.759 10.952 14.641 11 14.5 11L13 11L13 13.5C13 13.641 12.952 13.759 12.856 13.856C12.759 13.952 12.641 14 12.5 14C12.359 14 12.241 13.952 12.144 13.856C12.048 13.759 12 13.641 12 13.5L12 11L4 11L4 13.5C4 13.641 3.952 13.759 3.856 13.856ZM6 6.624C5.68 6.499 5.373 6.344 5.079 6.16C4.681 5.911 4.321 5.616 4 5.275L4 10L6 10L6 6.624ZM12 10L12 5.275C11.679 5.616 11.319 5.911 10.921 6.16C10.627 6.344 10.32 6.499 10 6.624L10 10L12 10ZM9 6.909C8.671 6.97 8.338 7 8 7C7.662 7 7.329 6.97 7 6.909L7 10L9 10L9 6.909Z" />
    </svg>
  );
}
Vue
Vue: see /icons/bridge.md
Svelte
Svelte: see /icons/bridge.md
HTML img
HTML img: see /icons/bridge.md
CSS
CSS: see /icons/bridge.md
Data URL
Data URL: see /icons/bridge.md
Sprite
Sprite: see /icons/bridge.md
SwiftUI
SwiftUI: see /icons/bridge.md
Compose
Compose: see /icons/bridge.md
Android XML
Android XML: see /icons/bridge.md
Flutter
Flutter: see /icons/bridge.md

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. 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.

Meaning

Use it for
bridge, crossing, overpass, viaduct
Alternatives
  • road: a road or street
Tags
bridge, crossing, overpass, suspension-bridge, river, landmark, road, connection
Category
Maps & places
Component name
BridgeIcon
History
  • added

More maps & places icons

binoculars compass crosshair flag flag-check flag-clock flag-off flag-plus flag-swallowtail footprints globe globe-arrow-up globe-check globe-gear globe-lock globe-off · all maps & places icons

For agents

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

Feedback