chips icon

Chips: chips, filter chips, chip group. 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="M8.736 2.14C8.993 2.242 9.219 2.391 9.414 2.586C9.609 2.781 9.758 3.007 9.86 3.264C9.953 3.5 10 3.746 10 4L10 5C10 5.254 9.953 5.5 9.86 5.736C9.758 5.993 9.609 6.219 9.414 6.414C9.219 6.609 8.993 6.758 8.736 6.86C8.5 6.953 8.254 7 8 7L3 7C2.746 7 2.5 6.953 2.264 6.86C2.007 6.758 1.781 6.609 1.586 6.414C1.391 6.219 1.242 5.993 1.14 5.736C1.047 5.5 1 5.254 1 5L1 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 2L8 2C8.254 2 8.5 2.047 8.736 2.14ZM2.293 3.293C2.098 3.488 2 3.724 2 4L2 5C2 5.276 2.098 5.512 2.293 5.707C2.488 5.902 2.724 6 3 6L8 6C8.276 6 8.512 5.902 8.707 5.707C8.902 5.512 9 5.276 9 5L9 4C9 3.724 8.902 3.488 8.707 3.293C8.512 3.098 8.276 3 8 3L3 3C2.724 3 2.488 3.098 2.293 3.293ZM6.856 4.144C6.952 4.241 7 4.359 7 4.5C7 4.641 6.952 4.759 6.856 4.856C6.759 4.952 6.641 5 6.5 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L6.5 4C6.641 4 6.759 4.048 6.856 4.144ZM14.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 11C1 10.746 1.047 10.5 1.14 10.264C1.242 10.007 1.391 9.781 1.586 9.586C1.781 9.391 2.007 9.242 2.264 9.14C2.5 9.047 2.746 9 3 9L13 9C13.254 9 13.5 9.047 13.736 9.14C13.993 9.242 14.219 9.391 14.414 9.586C14.609 9.781 14.758 10.007 14.86 10.264C14.953 10.5 15 10.746 15 11L15 12C15 12.254 14.953 12.5 14.86 12.736C14.758 12.993 14.609 13.219 14.414 13.414ZM2.293 12.707C2.488 12.902 2.724 13 3 13L13 13C13.276 13 13.512 12.902 13.707 12.707C13.902 12.512 14 12.276 14 12L14 11C14 10.724 13.902 10.488 13.707 10.293C13.512 10.098 13.276 10 13 10L3 10C2.724 10 2.488 10.098 2.293 10.293C2.098 10.488 2 10.724 2 11L2 12C2 12.276 2.098 12.512 2.293 12.707ZM12 11.5C12 11.641 11.952 11.759 11.856 11.856C11.759 11.952 11.641 12 11.5 12L4.5 12C4.359 12 4.241 11.952 4.144 11.856C4.048 11.759 4 11.641 4 11.5C4 11.359 4.048 11.241 4.144 11.144C4.241 11.048 4.359 11 4.5 11L11.5 11C11.641 11 11.759 11.048 11.856 11.144C11.952 11.241 12 11.359 12 11.5Z"/></svg>

React

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

export function ChipsIcon(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="M8.736 2.14C8.993 2.242 9.219 2.391 9.414 2.586C9.609 2.781 9.758 3.007 9.86 3.264C9.953 3.5 10 3.746 10 4L10 5C10 5.254 9.953 5.5 9.86 5.736C9.758 5.993 9.609 6.219 9.414 6.414C9.219 6.609 8.993 6.758 8.736 6.86C8.5 6.953 8.254 7 8 7L3 7C2.746 7 2.5 6.953 2.264 6.86C2.007 6.758 1.781 6.609 1.586 6.414C1.391 6.219 1.242 5.993 1.14 5.736C1.047 5.5 1 5.254 1 5L1 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 2L8 2C8.254 2 8.5 2.047 8.736 2.14ZM2.293 3.293C2.098 3.488 2 3.724 2 4L2 5C2 5.276 2.098 5.512 2.293 5.707C2.488 5.902 2.724 6 3 6L8 6C8.276 6 8.512 5.902 8.707 5.707C8.902 5.512 9 5.276 9 5L9 4C9 3.724 8.902 3.488 8.707 3.293C8.512 3.098 8.276 3 8 3L3 3C2.724 3 2.488 3.098 2.293 3.293ZM6.856 4.144C6.952 4.241 7 4.359 7 4.5C7 4.641 6.952 4.759 6.856 4.856C6.759 4.952 6.641 5 6.5 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L6.5 4C6.641 4 6.759 4.048 6.856 4.144ZM14.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 11C1 10.746 1.047 10.5 1.14 10.264C1.242 10.007 1.391 9.781 1.586 9.586C1.781 9.391 2.007 9.242 2.264 9.14C2.5 9.047 2.746 9 3 9L13 9C13.254 9 13.5 9.047 13.736 9.14C13.993 9.242 14.219 9.391 14.414 9.586C14.609 9.781 14.758 10.007 14.86 10.264C14.953 10.5 15 10.746 15 11L15 12C15 12.254 14.953 12.5 14.86 12.736C14.758 12.993 14.609 13.219 14.414 13.414ZM2.293 12.707C2.488 12.902 2.724 13 3 13L13 13C13.276 13 13.512 12.902 13.707 12.707C13.902 12.512 14 12.276 14 12L14 11C14 10.724 13.902 10.488 13.707 10.293C13.512 10.098 13.276 10 13 10L3 10C2.724 10 2.488 10.098 2.293 10.293C2.098 10.488 2 10.724 2 11L2 12C2 12.276 2.098 12.512 2.293 12.707ZM12 11.5C12 11.641 11.952 11.759 11.856 11.856C11.759 11.952 11.641 12 11.5 12L4.5 12C4.359 12 4.241 11.952 4.144 11.856C4.048 11.759 4 11.641 4 11.5C4 11.359 4.048 11.241 4.144 11.144C4.241 11.048 4.359 11 4.5 11L11.5 11C11.641 11 11.759 11.048 11.856 11.144C11.952 11.241 12 11.359 12 11.5Z" />
    </svg>
  );
}

Vue

Vue: see /icons/chips.md

Svelte

Svelte: see /icons/chips.md

HTML img

HTML img: see /icons/chips.md

CSS

CSS: see /icons/chips.md

Data URL

Data URL: see /icons/chips.md

Sprite

Sprite: see /icons/chips.md

SwiftUI

SwiftUI: see /icons/chips.md

Compose

Compose: see /icons/chips.md

Android XML

Android XML: see /icons/chips.md

Flutter

Flutter: see /icons/chips.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. 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

chips, filter chips, chip group

Tags

chips, chip group, filter chips, input chips, tags, pills, filters, ui component, material

Category

Layout & interface

Component name

ChipsIcon

History

2026-11-12 20 px drawn, 24 px drawn, added

More layout & interface icons

accordion app apps apps-alert apps-check apps-clock apps-gear apps-link apps-off apps-pencil apps-plus apps-search apps-shield apps-sparkle apps-x breadcrumb · all layout & interface icons

For agents

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

chips 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

chips icon