# component icon

Component. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/component

- Category: Design
- Use it for: component, design component, create component
- Tags: component, design-component, main-component, design-system, figma, symbol, reusable, ui-kit, diamonds
- Component name: ComponentIcon
- Added: 2026-10-19

## Don't confuse with

- `puzzle`: the puzzle piece means plugin or extension

## Also fits

- toy: a reusable UI or design component

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/component.svg · PNG https://gentleface.com/png/line-round/16/component.png · https://gentleface.com/png/line-round/32/component.png · https://gentleface.com/png/line-round/48/component.png
- line-soft: https://gentleface.com/svg/line-soft/16/component.svg · PNG https://gentleface.com/png/line-soft/16/component.png · https://gentleface.com/png/line-soft/32/component.png · https://gentleface.com/png/line-soft/48/component.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/component.svg · PNG https://gentleface.com/png/line-sharp/16/component.png · https://gentleface.com/png/line-sharp/32/component.png · https://gentleface.com/png/line-sharp/48/component.png
- solid-round: https://gentleface.com/svg/solid-round/16/component.svg · PNG https://gentleface.com/png/solid-round/16/component.png · https://gentleface.com/png/solid-round/32/component.png · https://gentleface.com/png/solid-round/48/component.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/component.svg · PNG https://gentleface.com/png/solid-soft/16/component.png · https://gentleface.com/png/solid-soft/32/component.png · https://gentleface.com/png/solid-soft/48/component.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/component.svg · PNG https://gentleface.com/png/solid-sharp/16/component.png · https://gentleface.com/png/solid-sharp/32/component.png · https://gentleface.com/png/solid-sharp/48/component.png

The SVG of every style: https://gentleface.com/icons/component.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```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="M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z"/></svg>
```

### React

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

export function ComponentIcon(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="M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component -->
<script>
  let props = $props();
</script>

<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="M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/component.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component. Takes the text color. */
.icon-component {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#component"/></svg>
```

### SwiftUI

```swift
// Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component
import SwiftUI

struct ComponentIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 9.5, y: 4.207))
        p.addLine(to: CGPoint(x: 8.207, y: 5.5))
        p.addCurve(to: CGPoint(x: 7.5, y: 5.793), control1: CGPoint(x: 8.012, y: 5.695), control2: CGPoint(x: 7.776, y: 5.793))
        p.addCurve(to: CGPoint(x: 6.793, y: 5.5), control1: CGPoint(x: 7.224, y: 5.793), control2: CGPoint(x: 6.988, y: 5.695))
        p.addLine(to: CGPoint(x: 5.5, y: 4.207))
        p.addCurve(to: CGPoint(x: 5.207, y: 3.5), control1: CGPoint(x: 5.305, y: 4.012), control2: CGPoint(x: 5.207, y: 3.776))
        p.addCurve(to: CGPoint(x: 5.5, y: 2.793), control1: CGPoint(x: 5.207, y: 3.224), control2: CGPoint(x: 5.305, y: 2.988))
        p.addLine(to: CGPoint(x: 6.793, y: 1.5))
        p.addCurve(to: CGPoint(x: 7.5, y: 1.207), control1: CGPoint(x: 6.988, y: 1.305), control2: CGPoint(x: 7.224, y: 1.207))
        p.addCurve(to: CGPoint(x: 8.207, y: 1.5), control1: CGPoint(x: 7.776, y: 1.207), control2: CGPoint(x: 8.012, y: 1.305))
        p.addLine(to: CGPoint(x: 9.5, y: 2.793))
        p.addCurve(to: CGPoint(x: 9.793, y: 3.5), control1: CGPoint(x: 9.695, y: 2.988), control2: CGPoint(x: 9.793, y: 3.224))
        p.addCurve(to: CGPoint(x: 9.5, y: 4.207), control1: CGPoint(x: 9.793, y: 3.776), control2: CGPoint(x: 9.695, y: 4.012))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5.5, y: 6.793))
        p.addCurve(to: CGPoint(x: 5.793, y: 7.5), control1: CGPoint(x: 5.695, y: 6.988), control2: CGPoint(x: 5.793, y: 7.224))
        p.addCurve(to: CGPoint(x: 5.5, y: 8.207), control1: CGPoint(x: 5.793, y: 7.776), control2: CGPoint(x: 5.695, y: 8.012))
        p.addLine(to: CGPoint(x: 4.207, y: 9.5))
        p.addCurve(to: CGPoint(x: 3.5, y: 9.793), control1: CGPoint(x: 4.012, y: 9.695), control2: CGPoint(x: 3.776, y: 9.793))
        p.addCurve(to: CGPoint(x: 2.793, y: 9.5), control1: CGPoint(x: 3.224, y: 9.793), control2: CGPoint(x: 2.988, y: 9.695))
        p.addLine(to: CGPoint(x: 1.5, y: 8.207))
        p.addCurve(to: CGPoint(x: 1.207, y: 7.5), control1: CGPoint(x: 1.305, y: 8.012), control2: CGPoint(x: 1.207, y: 7.776))
        p.addCurve(to: CGPoint(x: 1.5, y: 6.793), control1: CGPoint(x: 1.207, y: 7.224), control2: CGPoint(x: 1.305, y: 6.988))
        p.addLine(to: CGPoint(x: 2.793, y: 5.5))
        p.addCurve(to: CGPoint(x: 3.5, y: 5.207), control1: CGPoint(x: 2.988, y: 5.305), control2: CGPoint(x: 3.224, y: 5.207))
        p.addCurve(to: CGPoint(x: 4.207, y: 5.5), control1: CGPoint(x: 3.776, y: 5.207), control2: CGPoint(x: 4.012, y: 5.305))
        p.addLine(to: CGPoint(x: 5.5, y: 6.793))
        p.closeSubpath()
        p.move(to: CGPoint(x: 13.5, y: 8.207))
        p.addLine(to: CGPoint(x: 12.207, y: 9.5))
        p.addCurve(to: CGPoint(x: 11.5, y: 9.793), control1: CGPoint(x: 12.012, y: 9.695), control2: CGPoint(x: 11.776, y: 9.793))
        p.addCurve(to: CGPoint(x: 10.793, y: 9.5), control1: CGPoint(x: 11.224, y: 9.793), control2: CGPoint(x: 10.988, y: 9.695))
        p.addLine(to: CGPoint(x: 9.5, y: 8.207))
        p.addCurve(to: CGPoint(x: 9.207, y: 7.5), control1: CGPoint(x: 9.305, y: 8.012), control2: CGPoint(x: 9.207, y: 7.776))
        p.addCurve(to: CGPoint(x: 9.5, y: 6.793), control1: CGPoint(x: 9.207, y: 7.224), control2: CGPoint(x: 9.305, y: 6.988))
        p.addLine(to: CGPoint(x: 10.793, y: 5.5))
        p.addCurve(to: CGPoint(x: 11.5, y: 5.207), control1: CGPoint(x: 10.988, y: 5.305), control2: CGPoint(x: 11.224, y: 5.207))
        p.addCurve(to: CGPoint(x: 12.207, y: 5.5), control1: CGPoint(x: 11.776, y: 5.207), control2: CGPoint(x: 12.012, y: 5.305))
        p.addLine(to: CGPoint(x: 13.5, y: 6.793))
        p.addCurve(to: CGPoint(x: 13.793, y: 7.5), control1: CGPoint(x: 13.695, y: 6.988), control2: CGPoint(x: 13.793, y: 7.224))
        p.addCurve(to: CGPoint(x: 13.5, y: 8.207), control1: CGPoint(x: 13.793, y: 7.776), control2: CGPoint(x: 13.695, y: 8.012))
        p.closeSubpath()
        p.move(to: CGPoint(x: 9.5, y: 12.207))
        p.addLine(to: CGPoint(x: 8.207, y: 13.5))
        p.addCurve(to: CGPoint(x: 7.5, y: 13.793), control1: CGPoint(x: 8.012, y: 13.695), control2: CGPoint(x: 7.776, y: 13.793))
        p.addCurve(to: CGPoint(x: 6.793, y: 13.5), control1: CGPoint(x: 7.224, y: 13.793), control2: CGPoint(x: 6.988, y: 13.695))
        p.addLine(to: CGPoint(x: 5.5, y: 12.207))
        p.addCurve(to: CGPoint(x: 5.207, y: 11.5), control1: CGPoint(x: 5.305, y: 12.012), control2: CGPoint(x: 5.207, y: 11.776))
        p.addCurve(to: CGPoint(x: 5.5, y: 10.793), control1: CGPoint(x: 5.207, y: 11.224), control2: CGPoint(x: 5.305, y: 10.988))
        p.addLine(to: CGPoint(x: 6.793, y: 9.5))
        p.addCurve(to: CGPoint(x: 7.5, y: 9.207), control1: CGPoint(x: 6.988, y: 9.305), control2: CGPoint(x: 7.224, y: 9.207))
        p.addCurve(to: CGPoint(x: 8.207, y: 9.5), control1: CGPoint(x: 7.776, y: 9.207), control2: CGPoint(x: 8.012, y: 9.305))
        p.addLine(to: CGPoint(x: 9.5, y: 10.793))
        p.addCurve(to: CGPoint(x: 9.793, y: 11.5), control1: CGPoint(x: 9.695, y: 10.988), control2: CGPoint(x: 9.793, y: 11.224))
        p.addCurve(to: CGPoint(x: 9.5, y: 12.207), control1: CGPoint(x: 9.793, y: 11.776), control2: CGPoint(x: 9.695, y: 12.012))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// ComponentIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val ComponentIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "component", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(ComponentIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_component.xml · Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "component" (line-round), MIT. https://gentleface.com/icons/component
import 'package:flutter/widgets.dart';

class ComponentIcon extends StatelessWidget {
  const ComponentIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _ComponentIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _ComponentIconPainter extends CustomPainter {
  _ComponentIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(9.5, 4.207)
      ..lineTo(8.207, 5.5)
      ..cubicTo(8.012, 5.695, 7.776, 5.793, 7.5, 5.793)
      ..cubicTo(7.224, 5.793, 6.988, 5.695, 6.793, 5.5)
      ..lineTo(5.5, 4.207)
      ..cubicTo(5.305, 4.012, 5.207, 3.776, 5.207, 3.5)
      ..cubicTo(5.207, 3.224, 5.305, 2.988, 5.5, 2.793)
      ..lineTo(6.793, 1.5)
      ..cubicTo(6.988, 1.305, 7.224, 1.207, 7.5, 1.207)
      ..cubicTo(7.776, 1.207, 8.012, 1.305, 8.207, 1.5)
      ..lineTo(9.5, 2.793)
      ..cubicTo(9.695, 2.988, 9.793, 3.224, 9.793, 3.5)
      ..cubicTo(9.793, 3.776, 9.695, 4.012, 9.5, 4.207)
      ..close()
      ..moveTo(5.5, 6.793)
      ..cubicTo(5.695, 6.988, 5.793, 7.224, 5.793, 7.5)
      ..cubicTo(5.793, 7.776, 5.695, 8.012, 5.5, 8.207)
      ..lineTo(4.207, 9.5)
      ..cubicTo(4.012, 9.695, 3.776, 9.793, 3.5, 9.793)
      ..cubicTo(3.224, 9.793, 2.988, 9.695, 2.793, 9.5)
      ..lineTo(1.5, 8.207)
      ..cubicTo(1.305, 8.012, 1.207, 7.776, 1.207, 7.5)
      ..cubicTo(1.207, 7.224, 1.305, 6.988, 1.5, 6.793)
      ..lineTo(2.793, 5.5)
      ..cubicTo(2.988, 5.305, 3.224, 5.207, 3.5, 5.207)
      ..cubicTo(3.776, 5.207, 4.012, 5.305, 4.207, 5.5)
      ..lineTo(5.5, 6.793)
      ..close()
      ..moveTo(13.5, 8.207)
      ..lineTo(12.207, 9.5)
      ..cubicTo(12.012, 9.695, 11.776, 9.793, 11.5, 9.793)
      ..cubicTo(11.224, 9.793, 10.988, 9.695, 10.793, 9.5)
      ..lineTo(9.5, 8.207)
      ..cubicTo(9.305, 8.012, 9.207, 7.776, 9.207, 7.5)
      ..cubicTo(9.207, 7.224, 9.305, 6.988, 9.5, 6.793)
      ..lineTo(10.793, 5.5)
      ..cubicTo(10.988, 5.305, 11.224, 5.207, 11.5, 5.207)
      ..cubicTo(11.776, 5.207, 12.012, 5.305, 12.207, 5.5)
      ..lineTo(13.5, 6.793)
      ..cubicTo(13.695, 6.988, 13.793, 7.224, 13.793, 7.5)
      ..cubicTo(13.793, 7.776, 13.695, 8.012, 13.5, 8.207)
      ..close()
      ..moveTo(9.5, 12.207)
      ..lineTo(8.207, 13.5)
      ..cubicTo(8.012, 13.695, 7.776, 13.793, 7.5, 13.793)
      ..cubicTo(7.224, 13.793, 6.988, 13.695, 6.793, 13.5)
      ..lineTo(5.5, 12.207)
      ..cubicTo(5.305, 12.012, 5.207, 11.776, 5.207, 11.5)
      ..cubicTo(5.207, 11.224, 5.305, 10.988, 5.5, 10.793)
      ..lineTo(6.793, 9.5)
      ..cubicTo(6.988, 9.305, 7.224, 9.207, 7.5, 9.207)
      ..cubicTo(7.776, 9.207, 8.012, 9.305, 8.207, 9.5)
      ..lineTo(9.5, 10.793)
      ..cubicTo(9.695, 10.988, 9.793, 11.224, 9.793, 11.5)
      ..cubicTo(9.793, 11.776, 9.695, 12.012, 9.5, 12.207)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_ComponentIconPainter old) => old.color != color;
}
```