# mouse-scroll icon

Mouse scroll. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/mouse-scroll

- Category: Devices & hardware
- Use it for: scroll wheel, mouse scroll, mouse wheel
- Tags: mouse, scroll, scroll-wheel, wheel, scroll-up, scroll-down, middle-click, input, pointing-device, ui
- Family: mouse, mouse-left-click, mouse-right-click
- Component name: MouseScrollIcon
- Added: 2026-10-19

## Also fits

- scroll: scrolling a page or list (scroll-wheel)

## 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/mouse-scroll.svg · PNG https://gentleface.com/png/line-round/16/mouse-scroll.png · https://gentleface.com/png/line-round/32/mouse-scroll.png · https://gentleface.com/png/line-round/48/mouse-scroll.png
- line-soft: https://gentleface.com/svg/line-soft/16/mouse-scroll.svg · PNG https://gentleface.com/png/line-soft/16/mouse-scroll.png · https://gentleface.com/png/line-soft/32/mouse-scroll.png · https://gentleface.com/png/line-soft/48/mouse-scroll.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/mouse-scroll.svg · PNG https://gentleface.com/png/line-sharp/16/mouse-scroll.png · https://gentleface.com/png/line-sharp/32/mouse-scroll.png · https://gentleface.com/png/line-sharp/48/mouse-scroll.png
- solid-round: https://gentleface.com/svg/solid-round/16/mouse-scroll.svg · PNG https://gentleface.com/png/solid-round/16/mouse-scroll.png · https://gentleface.com/png/solid-round/32/mouse-scroll.png · https://gentleface.com/png/solid-round/48/mouse-scroll.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/mouse-scroll.svg · PNG https://gentleface.com/png/solid-soft/16/mouse-scroll.png · https://gentleface.com/png/solid-soft/32/mouse-scroll.png · https://gentleface.com/png/solid-soft/48/mouse-scroll.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/mouse-scroll.svg · PNG https://gentleface.com/png/solid-sharp/16/mouse-scroll.png · https://gentleface.com/png/solid-sharp/32/mouse-scroll.png · https://gentleface.com/png/solid-sharp/48/mouse-scroll.png

The SVG of every style: https://gentleface.com/icons/mouse-scroll.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="M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z"/></svg>
```

### React

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

export function MouseScrollIcon(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="M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "mouse-scroll" (line-round), MIT. https://gentleface.com/icons/mouse-scroll -->
<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="M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "mouse-scroll" (line-round), MIT. https://gentleface.com/icons/mouse-scroll -->
<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="M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "mouse-scroll" (line-round), MIT. https://gentleface.com/icons/mouse-scroll. 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/mouse-scroll.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "mouse-scroll" (line-round), MIT. https://gentleface.com/icons/mouse-scroll. Takes the text color. */
.icon-mouse-scroll {
  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='M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z'/%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='M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z'/%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='M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "mouse-scroll" (line-round), MIT. https://gentleface.com/icons/mouse-scroll
     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#mouse-scroll"/></svg>
```

### SwiftUI

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

struct MouseScrollIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 11.684, y: 12.156))
        p.addCurve(to: CGPoint(x: 10.682, y: 13.682), control1: CGPoint(x: 11.455, y: 12.734), control2: CGPoint(x: 11.121, y: 13.243))
        p.addCurve(to: CGPoint(x: 9.156, y: 14.684), control1: CGPoint(x: 10.243, y: 14.121), control2: CGPoint(x: 9.734, y: 14.455))
        p.addCurve(to: CGPoint(x: 7.5, y: 15), control1: CGPoint(x: 8.624, y: 14.895), control2: CGPoint(x: 8.072, y: 15))
        p.addCurve(to: CGPoint(x: 5.844, y: 14.684), control1: CGPoint(x: 6.928, y: 15), control2: CGPoint(x: 6.376, y: 14.895))
        p.addCurve(to: CGPoint(x: 4.318, y: 13.682), control1: CGPoint(x: 5.266, y: 14.455), control2: CGPoint(x: 4.757, y: 14.121))
        p.addCurve(to: CGPoint(x: 3.316, y: 12.156), control1: CGPoint(x: 3.879, y: 13.243), control2: CGPoint(x: 3.545, y: 12.734))
        p.addCurve(to: CGPoint(x: 3, y: 10.5), control1: CGPoint(x: 3.105, y: 11.624), control2: CGPoint(x: 3, y: 11.072))
        p.addLine(to: CGPoint(x: 3, y: 5.5))
        p.addCurve(to: CGPoint(x: 3.316, y: 3.844), control1: CGPoint(x: 3, y: 4.928), control2: CGPoint(x: 3.105, y: 4.376))
        p.addCurve(to: CGPoint(x: 4.318, y: 2.318), control1: CGPoint(x: 3.545, y: 3.266), control2: CGPoint(x: 3.879, y: 2.757))
        p.addCurve(to: CGPoint(x: 5.844, y: 1.316), control1: CGPoint(x: 4.757, y: 1.879), control2: CGPoint(x: 5.266, y: 1.545))
        p.addCurve(to: CGPoint(x: 7.5, y: 1), control1: CGPoint(x: 6.376, y: 1.105), control2: CGPoint(x: 6.928, y: 1))
        p.addCurve(to: CGPoint(x: 9.156, y: 1.316), control1: CGPoint(x: 8.072, y: 1), control2: CGPoint(x: 8.624, y: 1.105))
        p.addCurve(to: CGPoint(x: 10.682, y: 2.318), control1: CGPoint(x: 9.734, y: 1.545), control2: CGPoint(x: 10.243, y: 1.879))
        p.addCurve(to: CGPoint(x: 11.684, y: 3.844), control1: CGPoint(x: 11.121, y: 2.757), control2: CGPoint(x: 11.455, y: 3.266))
        p.addCurve(to: CGPoint(x: 12, y: 5.5), control1: CGPoint(x: 11.895, y: 4.376), control2: CGPoint(x: 12, y: 4.928))
        p.addLine(to: CGPoint(x: 12, y: 10.5))
        p.addCurve(to: CGPoint(x: 11.684, y: 12.156), control1: CGPoint(x: 12, y: 11.072), control2: CGPoint(x: 11.895, y: 11.624))
        p.closeSubpath()
        p.move(to: CGPoint(x: 10.754, y: 4.212))
        p.addCurve(to: CGPoint(x: 9.975, y: 3.025), control1: CGPoint(x: 10.576, y: 3.762), control2: CGPoint(x: 10.317, y: 3.367))
        p.addCurve(to: CGPoint(x: 8.788, y: 2.246), control1: CGPoint(x: 9.633, y: 2.683), control2: CGPoint(x: 9.238, y: 2.424))
        p.addCurve(to: CGPoint(x: 7.5, y: 2), control1: CGPoint(x: 8.375, y: 2.082), control2: CGPoint(x: 7.945, y: 2))
        p.addCurve(to: CGPoint(x: 6.212, y: 2.246), control1: CGPoint(x: 7.055, y: 2), control2: CGPoint(x: 6.625, y: 2.082))
        p.addCurve(to: CGPoint(x: 5.025, y: 3.025), control1: CGPoint(x: 5.762, y: 2.424), control2: CGPoint(x: 5.367, y: 2.683))
        p.addCurve(to: CGPoint(x: 4.246, y: 4.212), control1: CGPoint(x: 4.683, y: 3.367), control2: CGPoint(x: 4.424, y: 3.762))
        p.addCurve(to: CGPoint(x: 4, y: 5.5), control1: CGPoint(x: 4.082, y: 4.625), control2: CGPoint(x: 4, y: 5.055))
        p.addLine(to: CGPoint(x: 4, y: 10.5))
        p.addCurve(to: CGPoint(x: 4.246, y: 11.788), control1: CGPoint(x: 4, y: 10.945), control2: CGPoint(x: 4.082, y: 11.375))
        p.addCurve(to: CGPoint(x: 5.025, y: 12.975), control1: CGPoint(x: 4.424, y: 12.238), control2: CGPoint(x: 4.683, y: 12.633))
        p.addCurve(to: CGPoint(x: 6.212, y: 13.754), control1: CGPoint(x: 5.367, y: 13.317), control2: CGPoint(x: 5.762, y: 13.576))
        p.addCurve(to: CGPoint(x: 7.5, y: 14), control1: CGPoint(x: 6.625, y: 13.918), control2: CGPoint(x: 7.055, y: 14))
        p.addCurve(to: CGPoint(x: 8.788, y: 13.754), control1: CGPoint(x: 7.945, y: 14), control2: CGPoint(x: 8.375, y: 13.918))
        p.addCurve(to: CGPoint(x: 9.975, y: 12.975), control1: CGPoint(x: 9.238, y: 13.576), control2: CGPoint(x: 9.633, y: 13.317))
        p.addCurve(to: CGPoint(x: 10.754, y: 11.788), control1: CGPoint(x: 10.317, y: 12.633), control2: CGPoint(x: 10.576, y: 12.238))
        p.addCurve(to: CGPoint(x: 11, y: 10.5), control1: CGPoint(x: 10.918, y: 11.375), control2: CGPoint(x: 11, y: 10.945))
        p.addLine(to: CGPoint(x: 11, y: 5.5))
        p.addCurve(to: CGPoint(x: 10.754, y: 4.212), control1: CGPoint(x: 11, y: 5.055), control2: CGPoint(x: 10.918, y: 4.625))
        p.closeSubpath()
        p.move(to: CGPoint(x: 10, y: 5.5))
        p.addCurve(to: CGPoint(x: 9.854, y: 5.854), control1: CGPoint(x: 10, y: 5.638), control2: CGPoint(x: 9.951, y: 5.756))
        p.addCurve(to: CGPoint(x: 9.5, y: 6.003), control1: CGPoint(x: 9.754, y: 5.953), control2: CGPoint(x: 9.636, y: 6.003))
        p.addCurve(to: CGPoint(x: 9.146, y: 5.854), control1: CGPoint(x: 9.364, y: 6.003), control2: CGPoint(x: 9.246, y: 5.953))
        p.addLine(to: CGPoint(x: 8, y: 4.707))
        p.addLine(to: CGPoint(x: 8, y: 11.293))
        p.addLine(to: CGPoint(x: 9.146, y: 10.146))
        p.addCurve(to: CGPoint(x: 9.5, y: 9.997), control1: CGPoint(x: 9.246, y: 10.047), control2: CGPoint(x: 9.364, y: 9.997))
        p.addCurve(to: CGPoint(x: 9.854, y: 10.146), control1: CGPoint(x: 9.636, y: 9.997), control2: CGPoint(x: 9.754, y: 10.047))
        p.addCurve(to: CGPoint(x: 10.003, y: 10.5), control1: CGPoint(x: 9.953, y: 10.246), control2: CGPoint(x: 10.003, y: 10.364))
        p.addCurve(to: CGPoint(x: 9.854, y: 10.854), control1: CGPoint(x: 10.003, y: 10.636), control2: CGPoint(x: 9.953, y: 10.754))
        p.addLine(to: CGPoint(x: 7.854, y: 12.854))
        p.addCurve(to: CGPoint(x: 7.5, y: 13.003), control1: CGPoint(x: 7.754, y: 12.953), control2: CGPoint(x: 7.636, y: 13.003))
        p.addCurve(to: CGPoint(x: 7.146, y: 12.854), control1: CGPoint(x: 7.364, y: 13.003), control2: CGPoint(x: 7.246, y: 12.953))
        p.addLine(to: CGPoint(x: 5.146, y: 10.854))
        p.addCurve(to: CGPoint(x: 4.997, y: 10.5), control1: CGPoint(x: 5.047, y: 10.754), control2: CGPoint(x: 4.997, y: 10.636))
        p.addCurve(to: CGPoint(x: 5.146, y: 10.146), control1: CGPoint(x: 4.997, y: 10.364), control2: CGPoint(x: 5.047, y: 10.246))
        p.addCurve(to: CGPoint(x: 5.5, y: 10), control1: CGPoint(x: 5.244, y: 10.049), control2: CGPoint(x: 5.362, y: 10))
        p.addCurve(to: CGPoint(x: 5.854, y: 10.146), control1: CGPoint(x: 5.638, y: 10), control2: CGPoint(x: 5.756, y: 10.049))
        p.addLine(to: CGPoint(x: 7, y: 11.293))
        p.addLine(to: CGPoint(x: 7, y: 4.707))
        p.addLine(to: CGPoint(x: 5.854, y: 5.854))
        p.addCurve(to: CGPoint(x: 5.5, y: 6.003), control1: CGPoint(x: 5.754, y: 5.953), control2: CGPoint(x: 5.636, y: 6.003))
        p.addCurve(to: CGPoint(x: 5.146, y: 5.854), control1: CGPoint(x: 5.364, y: 6.003), control2: CGPoint(x: 5.246, y: 5.953))
        p.addCurve(to: CGPoint(x: 4.997, y: 5.5), control1: CGPoint(x: 5.047, y: 5.754), control2: CGPoint(x: 4.997, y: 5.636))
        p.addCurve(to: CGPoint(x: 5.146, y: 5.146), control1: CGPoint(x: 4.997, y: 5.364), control2: CGPoint(x: 5.047, y: 5.246))
        p.addLine(to: CGPoint(x: 7.146, y: 3.146))
        p.addCurve(to: CGPoint(x: 7.5, y: 3), control1: CGPoint(x: 7.244, y: 3.049), control2: CGPoint(x: 7.362, y: 3))
        p.addCurve(to: CGPoint(x: 7.854, y: 3.146), control1: CGPoint(x: 7.638, y: 3), control2: CGPoint(x: 7.756, y: 3.049))
        p.addLine(to: CGPoint(x: 9.854, y: 5.146))
        p.addCurve(to: CGPoint(x: 10, y: 5.5), control1: CGPoint(x: 9.951, y: 5.244), control2: CGPoint(x: 10, y: 5.362))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "mouse-scroll" (line-round), MIT. https://gentleface.com/icons/mouse-scroll
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 MouseScrollIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "mouse-scroll", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_mouse_scroll.xml · Gentleface "mouse-scroll" (line-round), MIT. https://gentleface.com/icons/mouse-scroll -->
<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="M11.684 12.156C11.455 12.734 11.121 13.243 10.682 13.682C10.243 14.121 9.734 14.455 9.156 14.684C8.624 14.895 8.072 15 7.5 15C6.928 15 6.376 14.895 5.844 14.684C5.266 14.455 4.757 14.121 4.318 13.682C3.879 13.243 3.545 12.734 3.316 12.156C3.105 11.624 3 11.072 3 10.5L3 5.5C3 4.928 3.105 4.376 3.316 3.844C3.545 3.266 3.879 2.757 4.318 2.318C4.757 1.879 5.266 1.545 5.844 1.316C6.376 1.105 6.928 1 7.5 1C8.072 1 8.624 1.105 9.156 1.316C9.734 1.545 10.243 1.879 10.682 2.318C11.121 2.757 11.455 3.266 11.684 3.844C11.895 4.376 12 4.928 12 5.5L12 10.5C12 11.072 11.895 11.624 11.684 12.156ZM10.754 4.212C10.576 3.762 10.317 3.367 9.975 3.025C9.633 2.683 9.238 2.424 8.788 2.246C8.375 2.082 7.945 2 7.5 2C7.055 2 6.625 2.082 6.212 2.246C5.762 2.424 5.367 2.683 5.025 3.025C4.683 3.367 4.424 3.762 4.246 4.212C4.082 4.625 4 5.055 4 5.5L4 10.5C4 10.945 4.082 11.375 4.246 11.788C4.424 12.238 4.683 12.633 5.025 12.975C5.367 13.317 5.762 13.576 6.212 13.754C6.625 13.918 7.055 14 7.5 14C7.945 14 8.375 13.918 8.788 13.754C9.238 13.576 9.633 13.317 9.975 12.975C10.317 12.633 10.576 12.238 10.754 11.788C10.918 11.375 11 10.945 11 10.5L11 5.5C11 5.055 10.918 4.625 10.754 4.212ZM10 5.5C10 5.638 9.951 5.756 9.854 5.854C9.754 5.953 9.636 6.003 9.5 6.003C9.364 6.003 9.246 5.953 9.146 5.854L8 4.707L8 11.293L9.146 10.146C9.246 10.047 9.364 9.997 9.5 9.997C9.636 9.997 9.754 10.047 9.854 10.146C9.953 10.246 10.003 10.364 10.003 10.5C10.003 10.636 9.953 10.754 9.854 10.854L7.854 12.854C7.754 12.953 7.636 13.003 7.5 13.003C7.364 13.003 7.246 12.953 7.146 12.854L5.146 10.854C5.047 10.754 4.997 10.636 4.997 10.5C4.997 10.364 5.047 10.246 5.146 10.146C5.244 10.049 5.362 10 5.5 10C5.638 10 5.756 10.049 5.854 10.146L7 11.293L7 4.707L5.854 5.854C5.754 5.953 5.636 6.003 5.5 6.003C5.364 6.003 5.246 5.953 5.146 5.854C5.047 5.754 4.997 5.636 4.997 5.5C4.997 5.364 5.047 5.246 5.146 5.146L7.146 3.146C7.244 3.049 7.362 3 7.5 3C7.638 3 7.756 3.049 7.854 3.146L9.854 5.146C9.951 5.244 10 5.362 10 5.5Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(11.684, 12.156)
      ..cubicTo(11.455, 12.734, 11.121, 13.243, 10.682, 13.682)
      ..cubicTo(10.243, 14.121, 9.734, 14.455, 9.156, 14.684)
      ..cubicTo(8.624, 14.895, 8.072, 15, 7.5, 15)
      ..cubicTo(6.928, 15, 6.376, 14.895, 5.844, 14.684)
      ..cubicTo(5.266, 14.455, 4.757, 14.121, 4.318, 13.682)
      ..cubicTo(3.879, 13.243, 3.545, 12.734, 3.316, 12.156)
      ..cubicTo(3.105, 11.624, 3, 11.072, 3, 10.5)
      ..lineTo(3, 5.5)
      ..cubicTo(3, 4.928, 3.105, 4.376, 3.316, 3.844)
      ..cubicTo(3.545, 3.266, 3.879, 2.757, 4.318, 2.318)
      ..cubicTo(4.757, 1.879, 5.266, 1.545, 5.844, 1.316)
      ..cubicTo(6.376, 1.105, 6.928, 1, 7.5, 1)
      ..cubicTo(8.072, 1, 8.624, 1.105, 9.156, 1.316)
      ..cubicTo(9.734, 1.545, 10.243, 1.879, 10.682, 2.318)
      ..cubicTo(11.121, 2.757, 11.455, 3.266, 11.684, 3.844)
      ..cubicTo(11.895, 4.376, 12, 4.928, 12, 5.5)
      ..lineTo(12, 10.5)
      ..cubicTo(12, 11.072, 11.895, 11.624, 11.684, 12.156)
      ..close()
      ..moveTo(10.754, 4.212)
      ..cubicTo(10.576, 3.762, 10.317, 3.367, 9.975, 3.025)
      ..cubicTo(9.633, 2.683, 9.238, 2.424, 8.788, 2.246)
      ..cubicTo(8.375, 2.082, 7.945, 2, 7.5, 2)
      ..cubicTo(7.055, 2, 6.625, 2.082, 6.212, 2.246)
      ..cubicTo(5.762, 2.424, 5.367, 2.683, 5.025, 3.025)
      ..cubicTo(4.683, 3.367, 4.424, 3.762, 4.246, 4.212)
      ..cubicTo(4.082, 4.625, 4, 5.055, 4, 5.5)
      ..lineTo(4, 10.5)
      ..cubicTo(4, 10.945, 4.082, 11.375, 4.246, 11.788)
      ..cubicTo(4.424, 12.238, 4.683, 12.633, 5.025, 12.975)
      ..cubicTo(5.367, 13.317, 5.762, 13.576, 6.212, 13.754)
      ..cubicTo(6.625, 13.918, 7.055, 14, 7.5, 14)
      ..cubicTo(7.945, 14, 8.375, 13.918, 8.788, 13.754)
      ..cubicTo(9.238, 13.576, 9.633, 13.317, 9.975, 12.975)
      ..cubicTo(10.317, 12.633, 10.576, 12.238, 10.754, 11.788)
      ..cubicTo(10.918, 11.375, 11, 10.945, 11, 10.5)
      ..lineTo(11, 5.5)
      ..cubicTo(11, 5.055, 10.918, 4.625, 10.754, 4.212)
      ..close()
      ..moveTo(10, 5.5)
      ..cubicTo(10, 5.638, 9.951, 5.756, 9.854, 5.854)
      ..cubicTo(9.754, 5.953, 9.636, 6.003, 9.5, 6.003)
      ..cubicTo(9.364, 6.003, 9.246, 5.953, 9.146, 5.854)
      ..lineTo(8, 4.707)
      ..lineTo(8, 11.293)
      ..lineTo(9.146, 10.146)
      ..cubicTo(9.246, 10.047, 9.364, 9.997, 9.5, 9.997)
      ..cubicTo(9.636, 9.997, 9.754, 10.047, 9.854, 10.146)
      ..cubicTo(9.953, 10.246, 10.003, 10.364, 10.003, 10.5)
      ..cubicTo(10.003, 10.636, 9.953, 10.754, 9.854, 10.854)
      ..lineTo(7.854, 12.854)
      ..cubicTo(7.754, 12.953, 7.636, 13.003, 7.5, 13.003)
      ..cubicTo(7.364, 13.003, 7.246, 12.953, 7.146, 12.854)
      ..lineTo(5.146, 10.854)
      ..cubicTo(5.047, 10.754, 4.997, 10.636, 4.997, 10.5)
      ..cubicTo(4.997, 10.364, 5.047, 10.246, 5.146, 10.146)
      ..cubicTo(5.244, 10.049, 5.362, 10, 5.5, 10)
      ..cubicTo(5.638, 10, 5.756, 10.049, 5.854, 10.146)
      ..lineTo(7, 11.293)
      ..lineTo(7, 4.707)
      ..lineTo(5.854, 5.854)
      ..cubicTo(5.754, 5.953, 5.636, 6.003, 5.5, 6.003)
      ..cubicTo(5.364, 6.003, 5.246, 5.953, 5.146, 5.854)
      ..cubicTo(5.047, 5.754, 4.997, 5.636, 4.997, 5.5)
      ..cubicTo(4.997, 5.364, 5.047, 5.246, 5.146, 5.146)
      ..lineTo(7.146, 3.146)
      ..cubicTo(7.244, 3.049, 7.362, 3, 7.5, 3)
      ..cubicTo(7.638, 3, 7.756, 3.049, 7.854, 3.146)
      ..lineTo(9.854, 5.146)
      ..cubicTo(9.951, 5.244, 10, 5.362, 10, 5.5)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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