spade icon

Spade: spade suit, spades. 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 6.146C13.17 6.463 13.434 6.869 13.647 7.366C13.882 7.915 14 8.459 14 9C14 9.548 13.903 10.072 13.708 10.572C13.524 11.044 13.266 11.465 12.934 11.834C12.607 12.198 12.236 12.481 11.821 12.684C11.39 12.895 10.949 13 10.5 13C9.694 13 8.969 12.758 8.325 12.275C8.212 12.19 8.104 12.1 8 12.004L8 14L9.5 14C9.641 14 9.759 14.048 9.856 14.144C9.952 14.241 10 14.359 10 14.5C10 14.641 9.952 14.759 9.856 14.856C9.759 14.952 9.641 15 9.5 15L5.5 15C5.359 15 5.241 14.952 5.144 14.856C5.048 14.759 5 14.641 5 14.5C5 14.359 5.048 14.241 5.144 14.144C5.241 14.048 5.359 14 5.5 14L7 14L7 12.004C6.896 12.1 6.788 12.19 6.675 12.275C6.031 12.758 5.306 13 4.5 13C4.051 13 3.61 12.895 3.179 12.684C2.764 12.481 2.393 12.198 2.066 11.834C1.734 11.465 1.476 11.044 1.292 10.572C1.097 10.072 1 9.548 1 9C1 8.459 1.118 7.915 1.353 7.366C1.566 6.869 1.83 6.463 2.146 6.146L6.086 2.207C6.266 2.027 6.472 1.887 6.706 1.786C6.959 1.676 7.224 1.621 7.5 1.621C7.776 1.621 8.041 1.676 8.294 1.786C8.528 1.887 8.734 2.027 8.914 2.207L12.854 6.146ZM8.207 2.914C8.012 2.719 7.776 2.621 7.5 2.621C7.224 2.621 6.988 2.719 6.793 2.914L2.854 6.854C2.628 7.079 2.434 7.381 2.272 7.759C2.091 8.183 2 8.596 2 9C2 9.423 2.075 9.826 2.224 10.209C2.363 10.568 2.559 10.887 2.809 11.166C3.049 11.432 3.319 11.639 3.618 11.785C3.911 11.928 4.205 12 4.5 12C5.083 12 5.608 11.825 6.075 11.475C6.479 11.172 6.805 10.773 7.053 10.276C7.102 10.177 7.177 10.102 7.276 10.053C7.4 9.991 7.527 9.982 7.658 10.026C7.789 10.069 7.885 10.153 7.947 10.276C8.195 10.773 8.521 11.172 8.925 11.475C9.392 11.825 9.917 12 10.5 12C10.795 12 11.089 11.928 11.382 11.785C11.681 11.639 11.951 11.432 12.191 11.166C12.441 10.887 12.637 10.568 12.776 10.209C12.925 9.826 13 9.423 13 9C13 8.596 12.909 8.183 12.728 7.759C12.566 7.381 12.372 7.079 12.146 6.854L8.207 2.914Z"/></svg>

React

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

export function SpadeIcon(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 6.146C13.17 6.463 13.434 6.869 13.647 7.366C13.882 7.915 14 8.459 14 9C14 9.548 13.903 10.072 13.708 10.572C13.524 11.044 13.266 11.465 12.934 11.834C12.607 12.198 12.236 12.481 11.821 12.684C11.39 12.895 10.949 13 10.5 13C9.694 13 8.969 12.758 8.325 12.275C8.212 12.19 8.104 12.1 8 12.004L8 14L9.5 14C9.641 14 9.759 14.048 9.856 14.144C9.952 14.241 10 14.359 10 14.5C10 14.641 9.952 14.759 9.856 14.856C9.759 14.952 9.641 15 9.5 15L5.5 15C5.359 15 5.241 14.952 5.144 14.856C5.048 14.759 5 14.641 5 14.5C5 14.359 5.048 14.241 5.144 14.144C5.241 14.048 5.359 14 5.5 14L7 14L7 12.004C6.896 12.1 6.788 12.19 6.675 12.275C6.031 12.758 5.306 13 4.5 13C4.051 13 3.61 12.895 3.179 12.684C2.764 12.481 2.393 12.198 2.066 11.834C1.734 11.465 1.476 11.044 1.292 10.572C1.097 10.072 1 9.548 1 9C1 8.459 1.118 7.915 1.353 7.366C1.566 6.869 1.83 6.463 2.146 6.146L6.086 2.207C6.266 2.027 6.472 1.887 6.706 1.786C6.959 1.676 7.224 1.621 7.5 1.621C7.776 1.621 8.041 1.676 8.294 1.786C8.528 1.887 8.734 2.027 8.914 2.207L12.854 6.146ZM8.207 2.914C8.012 2.719 7.776 2.621 7.5 2.621C7.224 2.621 6.988 2.719 6.793 2.914L2.854 6.854C2.628 7.079 2.434 7.381 2.272 7.759C2.091 8.183 2 8.596 2 9C2 9.423 2.075 9.826 2.224 10.209C2.363 10.568 2.559 10.887 2.809 11.166C3.049 11.432 3.319 11.639 3.618 11.785C3.911 11.928 4.205 12 4.5 12C5.083 12 5.608 11.825 6.075 11.475C6.479 11.172 6.805 10.773 7.053 10.276C7.102 10.177 7.177 10.102 7.276 10.053C7.4 9.991 7.527 9.982 7.658 10.026C7.789 10.069 7.885 10.153 7.947 10.276C8.195 10.773 8.521 11.172 8.925 11.475C9.392 11.825 9.917 12 10.5 12C10.795 12 11.089 11.928 11.382 11.785C11.681 11.639 11.951 11.432 12.191 11.166C12.441 10.887 12.637 10.568 12.776 10.209C12.925 9.826 13 9.423 13 9C13 8.596 12.909 8.183 12.728 7.759C12.566 7.381 12.372 7.079 12.146 6.854L8.207 2.914Z" />
    </svg>
  );
}

Vue

Vue: see /icons/spade.md

Svelte

Svelte: see /icons/spade.md

HTML img

HTML img: see /icons/spade.md

CSS

CSS: see /icons/spade.md

Data URL

Data URL: see /icons/spade.md

Sprite

Sprite: see /icons/spade.md

SwiftUI

SwiftUI: see /icons/spade.md

Compose

Compose: see /icons/spade.md

Android XML

Android XML: see /icons/spade.md

Flutter

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

spade suit, spades

Alternatives

shovel: a garden spade, or digging

Tags

spade, spades, card-suit, suit, playing-cards, poker, cards, casino

Category

Games & sports

Component name

SpadeIcon

History

2026-10-15 added

More games & sports icons

american-football baseball basketball bomb bowling boxing-glove chess-bishop chess-king chess-knight chess-pawn chess-queen chess-rook club cricket dice dumbbell · all games & sports icons

For agents

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

spade icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More games & sports icons

For agents

spade icon