Gentleface › Design › drafting-compass

drafting-compass icon

Drafting compass: drafting compass, geometry tool, drawing compass, architecture. 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="M7.144 1.144C7.241 1.048 7.359 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 2.05C8.142 2.079 8.283 2.121 8.42 2.176C8.741 2.303 9.024 2.488 9.268 2.732C9.512 2.976 9.697 3.259 9.824 3.58C9.941 3.875 10 4.182 10 4.5C10 4.818 9.941 5.125 9.824 5.42C9.697 5.741 9.512 6.024 9.268 6.268C9.196 6.339 9.121 6.406 9.043 6.468L10.846 10.074C11.319 9.791 11.751 9.449 12.143 9.049C12.241 8.948 12.359 8.897 12.495 8.896C12.631 8.895 12.749 8.943 12.85 9.042C12.951 9.14 13.002 9.258 13.003 9.394C13.004 9.53 12.956 9.648 12.857 9.749C12.387 10.229 11.866 10.636 11.294 10.97L12.947 14.276C13.01 14.402 13.02 14.53 12.977 14.659C12.934 14.788 12.85 14.884 12.724 14.947C12.598 15.01 12.47 15.02 12.341 14.977C12.212 14.934 12.116 14.85 12.053 14.724L10.399 11.417C9.474 11.806 8.507 12 7.5 12C6.493 12 5.526 11.806 4.601 11.417L2.947 14.724C2.885 14.847 2.789 14.931 2.658 14.974C2.527 15.018 2.4 15.009 2.276 14.947C2.153 14.885 2.069 14.789 2.026 14.658C1.982 14.527 1.991 14.4 2.053 14.276L3.706 10.97C3.134 10.636 2.613 10.229 2.143 9.749C2.046 9.65 1.999 9.532 2 9.394C2.001 9.256 2.051 9.138 2.15 9.042C2.249 8.945 2.367 8.898 2.505 8.899C2.643 8.9 2.761 8.95 2.857 9.049C3.249 9.449 3.681 9.791 4.154 10.074L5.957 6.468C5.879 6.406 5.804 6.339 5.732 6.268C5.488 6.024 5.303 5.741 5.176 5.42C5.059 5.125 5 4.818 5 4.5C5 4.182 5.059 3.875 5.176 3.58C5.303 3.259 5.488 2.976 5.732 2.732C5.976 2.488 6.259 2.303 6.58 2.176C6.717 2.121 6.858 2.079 7 2.05L7 1.5C7 1.359 7.048 1.241 7.144 1.144ZM6.105 5.052C6.182 5.245 6.293 5.414 6.439 5.561C6.586 5.707 6.755 5.818 6.948 5.895C7.125 5.965 7.309 6 7.5 6C7.691 6 7.875 5.965 8.052 5.895C8.245 5.818 8.414 5.707 8.561 5.561C8.707 5.414 8.818 5.245 8.895 5.052C8.965 4.875 9 4.691 9 4.5C9 4.309 8.965 4.125 8.895 3.948C8.818 3.755 8.707 3.586 8.561 3.439C8.414 3.293 8.245 3.182 8.052 3.105C7.875 3.035 7.691 3 7.5 3C7.309 3 7.125 3.035 6.948 3.105C6.755 3.182 6.586 3.293 6.439 3.439C6.293 3.586 6.182 3.755 6.105 3.948C6.035 4.125 6 4.309 6 4.5C6 4.691 6.035 4.875 6.105 5.052ZM7.5 11C8.351 11 9.168 10.84 9.951 10.52L8.148 6.915C7.938 6.972 7.722 7 7.5 7C7.278 7 7.062 6.972 6.852 6.915L5.049 10.52C5.832 10.84 6.649 11 7.5 11Z"/></svg>

React

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

export function DraftingCompassIcon(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="M7.144 1.144C7.241 1.048 7.359 1 7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 2.05C8.142 2.079 8.283 2.121 8.42 2.176C8.741 2.303 9.024 2.488 9.268 2.732C9.512 2.976 9.697 3.259 9.824 3.58C9.941 3.875 10 4.182 10 4.5C10 4.818 9.941 5.125 9.824 5.42C9.697 5.741 9.512 6.024 9.268 6.268C9.196 6.339 9.121 6.406 9.043 6.468L10.846 10.074C11.319 9.791 11.751 9.449 12.143 9.049C12.241 8.948 12.359 8.897 12.495 8.896C12.631 8.895 12.749 8.943 12.85 9.042C12.951 9.14 13.002 9.258 13.003 9.394C13.004 9.53 12.956 9.648 12.857 9.749C12.387 10.229 11.866 10.636 11.294 10.97L12.947 14.276C13.01 14.402 13.02 14.53 12.977 14.659C12.934 14.788 12.85 14.884 12.724 14.947C12.598 15.01 12.47 15.02 12.341 14.977C12.212 14.934 12.116 14.85 12.053 14.724L10.399 11.417C9.474 11.806 8.507 12 7.5 12C6.493 12 5.526 11.806 4.601 11.417L2.947 14.724C2.885 14.847 2.789 14.931 2.658 14.974C2.527 15.018 2.4 15.009 2.276 14.947C2.153 14.885 2.069 14.789 2.026 14.658C1.982 14.527 1.991 14.4 2.053 14.276L3.706 10.97C3.134 10.636 2.613 10.229 2.143 9.749C2.046 9.65 1.999 9.532 2 9.394C2.001 9.256 2.051 9.138 2.15 9.042C2.249 8.945 2.367 8.898 2.505 8.899C2.643 8.9 2.761 8.95 2.857 9.049C3.249 9.449 3.681 9.791 4.154 10.074L5.957 6.468C5.879 6.406 5.804 6.339 5.732 6.268C5.488 6.024 5.303 5.741 5.176 5.42C5.059 5.125 5 4.818 5 4.5C5 4.182 5.059 3.875 5.176 3.58C5.303 3.259 5.488 2.976 5.732 2.732C5.976 2.488 6.259 2.303 6.58 2.176C6.717 2.121 6.858 2.079 7 2.05L7 1.5C7 1.359 7.048 1.241 7.144 1.144ZM6.105 5.052C6.182 5.245 6.293 5.414 6.439 5.561C6.586 5.707 6.755 5.818 6.948 5.895C7.125 5.965 7.309 6 7.5 6C7.691 6 7.875 5.965 8.052 5.895C8.245 5.818 8.414 5.707 8.561 5.561C8.707 5.414 8.818 5.245 8.895 5.052C8.965 4.875 9 4.691 9 4.5C9 4.309 8.965 4.125 8.895 3.948C8.818 3.755 8.707 3.586 8.561 3.439C8.414 3.293 8.245 3.182 8.052 3.105C7.875 3.035 7.691 3 7.5 3C7.309 3 7.125 3.035 6.948 3.105C6.755 3.182 6.586 3.293 6.439 3.439C6.293 3.586 6.182 3.755 6.105 3.948C6.035 4.125 6 4.309 6 4.5C6 4.691 6.035 4.875 6.105 5.052ZM7.5 11C8.351 11 9.168 10.84 9.951 10.52L8.148 6.915C7.938 6.972 7.722 7 7.5 7C7.278 7 7.062 6.972 6.852 6.915L5.049 10.52C5.832 10.84 6.649 11 7.5 11Z" />
    </svg>
  );
}

Vue

Vue: see /icons/drafting-compass.md

Svelte

Svelte: see /icons/drafting-compass.md

HTML img

HTML img: see /icons/drafting-compass.md

CSS

CSS: see /icons/drafting-compass.md

Data URL

Data URL: see /icons/drafting-compass.md

Sprite

Sprite: see /icons/drafting-compass.md

SwiftUI

SwiftUI: see /icons/drafting-compass.md

Compose

Compose: see /icons/drafting-compass.md

Android XML

Android XML: see /icons/drafting-compass.md

Flutter

Flutter: see /icons/drafting-compass.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 { DraftingCompassIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

drafting compass, geometry tool, drawing compass, architecture

Don’t confuse with

compass: the navigation compass means explore (maps)

Also fits

geometry: geometric constructions and geometry tools

Tags

drafting compass, compasses, pair of compasses, divider, geometry, draw circle, arc, radius, technical drawing, drafting, architecture, math

Category

Design

Component name

DraftingCompassIcon

History

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

Since

version 0.2.0

More design icons

align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons

For agents

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

drafting-compass icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More design icons

For agents

drafting-compass icon