ampersand icon

Ampersand: ampersand, and operator, and sign. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="M12.854 12.146C12.953 12.246 13.003 12.364 13.003 12.5C13.003 12.636 12.953 12.754 12.854 12.854C12.754 12.953 12.636 13.003 12.5 13.003C12.364 13.003 12.246 12.953 12.146 12.854L10.5 11.207L9.854 11.854C9.462 12.245 8.944 12.54 8.298 12.74C7.738 12.913 7.139 13 6.5 13C6.071 13 5.648 12.926 5.231 12.777C4.822 12.632 4.453 12.428 4.125 12.165C3.782 11.891 3.513 11.576 3.319 11.221C3.106 10.832 3 10.425 3 10C3 9.646 3.087 9.335 3.261 9.068C3.331 8.961 3.421 8.85 3.532 8.736C3.593 8.672 3.692 8.577 3.83 8.449C3.966 8.322 4.072 8.221 4.146 8.146L5.793 6.5L5.146 5.854C5.106 5.813 5.044 5.752 4.962 5.672C4.661 5.379 4.453 5.15 4.336 4.985C4.112 4.668 4 4.34 4 4C4 3.709 4.074 3.432 4.223 3.169C4.359 2.929 4.547 2.719 4.788 2.538C5.018 2.366 5.279 2.234 5.572 2.141C5.869 2.047 6.178 2 6.5 2C6.822 2 7.131 2.047 7.428 2.141C7.721 2.234 7.982 2.366 8.212 2.538C8.453 2.719 8.641 2.929 8.777 3.169C8.926 3.432 9 3.709 9 4C9 4.34 8.888 4.668 8.664 4.985C8.547 5.15 8.339 5.379 8.038 5.672C7.956 5.752 7.894 5.813 7.854 5.854L7.207 6.5L10.5 9.793L12.146 8.146C12.246 8.047 12.364 7.997 12.5 7.997C12.636 7.997 12.754 8.047 12.854 8.146C12.953 8.246 13.003 8.364 13.003 8.5C13.003 8.636 12.953 8.754 12.854 8.854L11.207 10.5L12.854 12.146ZM7.146 5.146C7.19 5.103 7.255 5.039 7.341 4.956C7.597 4.706 7.766 4.523 7.848 4.408C7.949 4.264 8 4.128 8 4C8 3.752 7.871 3.532 7.613 3.339C7.473 3.235 7.311 3.153 7.125 3.094C6.927 3.031 6.719 3 6.5 3C6.281 3 6.073 3.031 5.875 3.094C5.689 3.153 5.527 3.235 5.387 3.339C5.129 3.532 5 3.752 5 4C5 4.128 5.051 4.264 5.152 4.408C5.234 4.523 5.403 4.706 5.659 4.956C5.745 5.039 5.81 5.103 5.854 5.146L6.5 5.793L7.146 5.146ZM4.51 9.181C4.291 9.385 4.154 9.529 4.099 9.613C4.033 9.715 4 9.844 4 10C4 10.255 4.065 10.502 4.196 10.741C4.326 10.979 4.511 11.193 4.75 11.385C4.99 11.577 5.262 11.727 5.566 11.835C5.875 11.945 6.186 12 6.5 12C7.038 12 7.539 11.928 8.002 11.785C8.491 11.634 8.872 11.421 9.146 11.146L9.793 10.5L6.5 7.207L4.854 8.854C4.77 8.937 4.656 9.046 4.51 9.181Z"/></svg>

React

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

export function AmpersandIcon(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="M12.854 12.146C12.953 12.246 13.003 12.364 13.003 12.5C13.003 12.636 12.953 12.754 12.854 12.854C12.754 12.953 12.636 13.003 12.5 13.003C12.364 13.003 12.246 12.953 12.146 12.854L10.5 11.207L9.854 11.854C9.462 12.245 8.944 12.54 8.298 12.74C7.738 12.913 7.139 13 6.5 13C6.071 13 5.648 12.926 5.231 12.777C4.822 12.632 4.453 12.428 4.125 12.165C3.782 11.891 3.513 11.576 3.319 11.221C3.106 10.832 3 10.425 3 10C3 9.646 3.087 9.335 3.261 9.068C3.331 8.961 3.421 8.85 3.532 8.736C3.593 8.672 3.692 8.577 3.83 8.449C3.966 8.322 4.072 8.221 4.146 8.146L5.793 6.5L5.146 5.854C5.106 5.813 5.044 5.752 4.962 5.672C4.661 5.379 4.453 5.15 4.336 4.985C4.112 4.668 4 4.34 4 4C4 3.709 4.074 3.432 4.223 3.169C4.359 2.929 4.547 2.719 4.788 2.538C5.018 2.366 5.279 2.234 5.572 2.141C5.869 2.047 6.178 2 6.5 2C6.822 2 7.131 2.047 7.428 2.141C7.721 2.234 7.982 2.366 8.212 2.538C8.453 2.719 8.641 2.929 8.777 3.169C8.926 3.432 9 3.709 9 4C9 4.34 8.888 4.668 8.664 4.985C8.547 5.15 8.339 5.379 8.038 5.672C7.956 5.752 7.894 5.813 7.854 5.854L7.207 6.5L10.5 9.793L12.146 8.146C12.246 8.047 12.364 7.997 12.5 7.997C12.636 7.997 12.754 8.047 12.854 8.146C12.953 8.246 13.003 8.364 13.003 8.5C13.003 8.636 12.953 8.754 12.854 8.854L11.207 10.5L12.854 12.146ZM7.146 5.146C7.19 5.103 7.255 5.039 7.341 4.956C7.597 4.706 7.766 4.523 7.848 4.408C7.949 4.264 8 4.128 8 4C8 3.752 7.871 3.532 7.613 3.339C7.473 3.235 7.311 3.153 7.125 3.094C6.927 3.031 6.719 3 6.5 3C6.281 3 6.073 3.031 5.875 3.094C5.689 3.153 5.527 3.235 5.387 3.339C5.129 3.532 5 3.752 5 4C5 4.128 5.051 4.264 5.152 4.408C5.234 4.523 5.403 4.706 5.659 4.956C5.745 5.039 5.81 5.103 5.854 5.146L6.5 5.793L7.146 5.146ZM4.51 9.181C4.291 9.385 4.154 9.529 4.099 9.613C4.033 9.715 4 9.844 4 10C4 10.255 4.065 10.502 4.196 10.741C4.326 10.979 4.511 11.193 4.75 11.385C4.99 11.577 5.262 11.727 5.566 11.835C5.875 11.945 6.186 12 6.5 12C7.038 12 7.539 11.928 8.002 11.785C8.491 11.634 8.872 11.421 9.146 11.146L9.793 10.5L6.5 7.207L4.854 8.854C4.77 8.937 4.656 9.046 4.51 9.181Z" />
    </svg>
  );
}

Vue

Vue: see /icons/ampersand.md

Svelte

Svelte: see /icons/ampersand.md

HTML img

HTML img: see /icons/ampersand.md

CSS

CSS: see /icons/ampersand.md

Data URL

Data URL: see /icons/ampersand.md

Sprite

Sprite: see /icons/ampersand.md

SwiftUI

SwiftUI: see /icons/ampersand.md

Compose

Compose: see /icons/ampersand.md

Android XML

Android XML: see /icons/ampersand.md

Flutter

Flutter: see /icons/ampersand.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.

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

Meaning

Use it for

ampersand, and operator, and sign

Alternatives

logic-and: the AND gate of a circuit or a rule builder (and-gate)

Also fits

and gate: the AND operator in code or a search query (and-operator)

Tags

ampersand, and, &, and-operator, logical-and, conjunction, symbol, plus, together, et

Category

Math & symbols

Component name

AmpersandIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More math & symbols icons

command diameter divide equal equal-not function function-sparkle greater-than hash infinity lambda less-than math-symbols percent pi plus-minus · all math & symbols icons

For agents

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

ampersand icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More math & symbols icons

For agents

ampersand icon