gentleface

Gentleface › Layout & interface › taskbar

taskbar icon

Taskbar: taskbar, app dock, dock bar. 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="M14.86 12.736C14.758 12.993 14.609 13.219 14.414 13.414C14.219 13.609 13.993 13.758 13.736 13.86C13.5 13.953 13.254 14 13 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 12C15 12.254 14.953 12.5 14.86 12.736ZM14 10L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 10L14 10ZM4 11L4 13L6 13L6 11L4 11ZM7 11L7 13L9 13L9 11L7 11ZM10 11L10 13L12 13L12 11L10 11Z"/></svg>
React
// Gentleface "taskbar" (line-round), MIT. https://gentleface.com/icons/taskbar
import type { SVGProps } from 'react';

export function TaskbarIcon(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="M14.86 12.736C14.758 12.993 14.609 13.219 14.414 13.414C14.219 13.609 13.993 13.758 13.736 13.86C13.5 13.953 13.254 14 13 14L3 14C2.746 14 2.5 13.953 2.264 13.86C2.007 13.758 1.781 13.609 1.586 13.414C1.391 13.219 1.242 12.993 1.14 12.736C1.047 12.5 1 12.254 1 12L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 12C15 12.254 14.953 12.5 14.86 12.736ZM14 10L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 10L14 10ZM4 11L4 13L6 13L6 11L4 11ZM7 11L7 13L9 13L9 11L7 11ZM10 11L10 13L12 13L12 11L10 11Z" />
    </svg>
  );
}
Vue
Vue: see /icons/taskbar.md
Svelte
Svelte: see /icons/taskbar.md
HTML img
HTML img: see /icons/taskbar.md
CSS
CSS: see /icons/taskbar.md
Data URL
Data URL: see /icons/taskbar.md
Sprite
Sprite: see /icons/taskbar.md
SwiftUI
SwiftUI: see /icons/taskbar.md
Compose
Compose: see /icons/taskbar.md
Android XML
Android XML: see /icons/taskbar.md
Flutter
Flutter: see /icons/taskbar.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 { TaskbarIcon } from '@gentleface/react'; (setup).

Meaning

Use it for
taskbar, app dock, dock bar
Tags
taskbar, task-bar, dock, app-dock, dock-bar, launcher, desktop, start-bar, system-tray, shelf, apps, bottom-bar, screen, operating-system
Category
Layout & interface
Component name
TaskbarIcon
History
  • released in 0.2.0
  • added
Since
version 0.2.0

More layout & interface icons

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

For agents

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