Gentleface › Layout & interface › command-palette

command-palette icon

Command palette: command palette, command menu, command bar, cmd k. 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.003 6.5C7.003 6.636 6.953 6.754 6.854 6.854C6.754 6.953 6.636 7.003 6.5 7.003C6.364 7.003 6.246 6.953 6.146 6.854L4.879 5.586C4.736 5.681 4.583 5.76 4.42 5.824C4.125 5.941 3.818 6 3.5 6C3.182 6 2.875 5.941 2.58 5.824C2.259 5.697 1.976 5.512 1.732 5.268C1.488 5.024 1.303 4.741 1.176 4.42C1.059 4.125 1 3.818 1 3.5C1 3.182 1.059 2.875 1.176 2.58C1.303 2.259 1.488 1.976 1.732 1.732C1.976 1.488 2.259 1.303 2.58 1.176C2.875 1.059 3.182 1 3.5 1C3.818 1 4.125 1.059 4.42 1.176C4.741 1.303 5.024 1.488 5.268 1.732C5.512 1.976 5.697 2.259 5.824 2.58C5.941 2.875 6 3.182 6 3.5C6 3.818 5.941 4.125 5.824 4.42C5.76 4.583 5.681 4.736 5.586 4.879L6.854 6.146C6.953 6.246 7.003 6.364 7.003 6.5ZM2.105 4.052C2.182 4.245 2.293 4.414 2.439 4.561C2.586 4.707 2.755 4.818 2.948 4.895C3.125 4.965 3.309 5 3.5 5C3.691 5 3.875 4.965 4.052 4.895C4.245 4.818 4.414 4.707 4.561 4.561C4.707 4.414 4.818 4.245 4.895 4.052C4.965 3.875 5 3.691 5 3.5C5 3.309 4.965 3.125 4.895 2.948C4.818 2.755 4.707 2.586 4.561 2.439C4.414 2.293 4.245 2.182 4.052 2.105C3.875 2.035 3.691 2 3.5 2C3.309 2 3.125 2.035 2.948 2.105C2.755 2.182 2.586 2.293 2.439 2.439C2.293 2.586 2.182 2.755 2.105 2.948C2.035 3.125 2 3.309 2 3.5C2 3.691 2.035 3.875 2.105 4.052ZM9.144 3.856C9.048 3.759 9 3.641 9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L9.5 4C9.359 4 9.241 3.952 9.144 3.856ZM14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 11C15 11.276 14.902 11.512 14.707 11.707C14.512 11.902 14.276 12 14 12L2 12C1.724 12 1.488 11.902 1.293 11.707C1.098 11.512 1 11.276 1 11L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L14 9ZM11 14.5C11 14.641 10.952 14.759 10.856 14.856C10.759 14.952 10.641 15 10.5 15L1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5C1 14.359 1.048 14.241 1.144 14.144C1.241 14.048 1.359 14 1.5 14L10.5 14C10.641 14 10.759 14.048 10.856 14.144C10.952 14.241 11 14.359 11 14.5Z"/></svg>

React

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

export function CommandPaletteIcon(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.003 6.5C7.003 6.636 6.953 6.754 6.854 6.854C6.754 6.953 6.636 7.003 6.5 7.003C6.364 7.003 6.246 6.953 6.146 6.854L4.879 5.586C4.736 5.681 4.583 5.76 4.42 5.824C4.125 5.941 3.818 6 3.5 6C3.182 6 2.875 5.941 2.58 5.824C2.259 5.697 1.976 5.512 1.732 5.268C1.488 5.024 1.303 4.741 1.176 4.42C1.059 4.125 1 3.818 1 3.5C1 3.182 1.059 2.875 1.176 2.58C1.303 2.259 1.488 1.976 1.732 1.732C1.976 1.488 2.259 1.303 2.58 1.176C2.875 1.059 3.182 1 3.5 1C3.818 1 4.125 1.059 4.42 1.176C4.741 1.303 5.024 1.488 5.268 1.732C5.512 1.976 5.697 2.259 5.824 2.58C5.941 2.875 6 3.182 6 3.5C6 3.818 5.941 4.125 5.824 4.42C5.76 4.583 5.681 4.736 5.586 4.879L6.854 6.146C6.953 6.246 7.003 6.364 7.003 6.5ZM2.105 4.052C2.182 4.245 2.293 4.414 2.439 4.561C2.586 4.707 2.755 4.818 2.948 4.895C3.125 4.965 3.309 5 3.5 5C3.691 5 3.875 4.965 4.052 4.895C4.245 4.818 4.414 4.707 4.561 4.561C4.707 4.414 4.818 4.245 4.895 4.052C4.965 3.875 5 3.691 5 3.5C5 3.309 4.965 3.125 4.895 2.948C4.818 2.755 4.707 2.586 4.561 2.439C4.414 2.293 4.245 2.182 4.052 2.105C3.875 2.035 3.691 2 3.5 2C3.309 2 3.125 2.035 2.948 2.105C2.755 2.182 2.586 2.293 2.439 2.439C2.293 2.586 2.182 2.755 2.105 2.948C2.035 3.125 2 3.309 2 3.5C2 3.691 2.035 3.875 2.105 4.052ZM9.144 3.856C9.048 3.759 9 3.641 9 3.5C9 3.359 9.048 3.241 9.144 3.144C9.241 3.048 9.359 3 9.5 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L9.5 4C9.359 4 9.241 3.952 9.144 3.856ZM14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 11C15 11.276 14.902 11.512 14.707 11.707C14.512 11.902 14.276 12 14 12L2 12C1.724 12 1.488 11.902 1.293 11.707C1.098 11.512 1 11.276 1 11L1 10C1 9.724 1.098 9.488 1.293 9.293C1.488 9.098 1.724 9 2 9L14 9ZM11 14.5C11 14.641 10.952 14.759 10.856 14.856C10.759 14.952 10.641 15 10.5 15L1.5 15C1.359 15 1.241 14.952 1.144 14.856C1.048 14.759 1 14.641 1 14.5C1 14.359 1.048 14.241 1.144 14.144C1.241 14.048 1.359 14 1.5 14L10.5 14C10.641 14 10.759 14.048 10.856 14.144C10.952 14.241 11 14.359 11 14.5Z" />
    </svg>
  );
}

Vue

Vue: see /icons/command-palette.md

Svelte

Svelte: see /icons/command-palette.md

HTML img

HTML img: see /icons/command-palette.md

CSS

CSS: see /icons/command-palette.md

Data URL

Data URL: see /icons/command-palette.md

Sprite

Sprite: see /icons/command-palette.md

SwiftUI

SwiftUI: see /icons/command-palette.md

Compose

Compose: see /icons/command-palette.md

Android XML

Android XML: see /icons/command-palette.md

Flutter

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

command palette, command menu, command bar, cmd k

Alternatives

command: the ⌘ key itself (command-key)
search: a plain search field (search)

Don’t confuse with

terminal: terminal is the shell or the command line, not the Cmd-K launcher

Also fits

quick action: a searchable list of all commands (Cmd+K)
terminal: the in-app command palette, not a shell (command-palette)
command: the Cmd-K command launcher (command-palette)

Tags

command palette, command menu, command bar, cmd k, ctrl k, quick open, launcher, spotlight, search commands, actions, keyboard

Category

Layout & interface

Component name

CommandPaletteIcon

History

2026-10-19 added

More layout & interface icons

accordion apps breadcrumb breadcrumb-chevrons browser button cards carousel-horizontal carousel-vertical checkbox checkbox-indeterminate checkbox-off columns columns-gear cursor cursor-click · all layout & interface icons

For agents

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

command-palette icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More layout & interface icons

For agents

command-palette icon