blend icon

Blend: blend mode, blending mode. 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="M1 6C1 5.364 1.117 4.75 1.351 4.159C1.605 3.517 1.976 2.952 2.464 2.464C2.952 1.975 3.517 1.604 4.159 1.35C4.75 1.116 5.364 0.998 6 0.998C6.636 0.998 7.25 1.116 7.841 1.35C8.483 1.604 9.048 1.975 9.536 2.464C10.024 2.952 10.395 3.517 10.649 4.159C10.769 4.462 10.858 4.77 10.916 5.084C11.23 5.142 11.538 5.231 11.84 5.351C12.482 5.605 13.047 5.976 13.536 6.464C14.024 6.953 14.395 7.518 14.649 8.16C14.883 8.751 15 9.364 15 10C15 10.636 14.883 11.249 14.649 11.84C14.395 12.482 14.024 13.047 13.536 13.536C13.047 14.024 12.482 14.395 11.84 14.649C11.249 14.883 10.636 15 10 15C9.364 15 8.751 14.883 8.16 14.649C7.518 14.395 6.953 14.024 6.464 13.536C5.976 13.047 5.605 12.482 5.351 11.84C5.232 11.539 5.143 11.231 5.084 10.918C4.77 10.859 4.462 10.77 4.159 10.65C3.517 10.396 2.952 10.025 2.464 9.536C1.976 9.048 1.605 8.483 1.351 7.841C1.117 7.25 1 6.636 1 6L1 6L1 6ZM2 6C2 6.509 2.093 7 2.28 7.473C2.484 7.987 2.781 8.439 3.171 8.829C3.562 9.22 4.014 9.517 4.527 9.721C4.683 9.782 4.842 9.834 5.002 9.875C5.016 9.284 5.132 8.712 5.351 8.16C5.605 7.518 5.976 6.953 6.464 6.464C6.953 5.976 7.518 5.605 8.16 5.351C8.712 5.132 9.283 5.016 9.874 5.002C9.833 4.841 9.781 4.683 9.72 4.527C9.516 4.013 9.219 3.561 8.829 3.171C8.438 2.78 7.986 2.483 7.473 2.279C7 2.092 6.509 1.998 6 1.998C5.491 1.998 5 2.092 4.527 2.279C4.014 2.483 3.562 2.78 3.171 3.171C2.781 3.561 2.484 4.013 2.28 4.527C2.093 5 2 5.491 2 6L2 6L2 6ZM6 10.002C6.509 10.002 7 9.908 7.473 9.721C7.986 9.517 8.438 9.22 8.829 8.829C9.219 8.439 9.516 7.987 9.72 7.473C9.907 7 10 6.509 10 6C9.491 6 9.001 6.094 8.528 6.281C8.014 6.484 7.562 6.781 7.172 7.172C6.781 7.562 6.484 8.014 6.281 8.528C6.094 9.001 6 9.491 6 10L6 10.001L6 10.002ZM7.172 12.828C7.562 13.219 8.014 13.516 8.528 13.719C9.001 13.906 9.491 14 10 14C10.509 14 10.999 13.906 11.472 13.719C11.986 13.516 12.438 13.219 12.828 12.828C13.219 12.438 13.516 11.986 13.719 11.472C13.906 10.999 14 10.509 14 10C14 9.491 13.906 9.001 13.719 8.528C13.516 8.014 13.219 7.562 12.828 7.172C12.438 6.781 11.986 6.484 11.472 6.281C11.316 6.219 11.158 6.168 10.999 6.126C10.984 6.717 10.868 7.289 10.649 7.841C10.395 8.483 10.024 9.048 9.536 9.536C9.048 10.025 8.483 10.396 7.841 10.65C7.289 10.869 6.717 10.985 6.127 11C6.168 11.159 6.219 11.317 6.281 11.472C6.484 11.986 6.781 12.438 7.172 12.828Z"/></svg>

React

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

export function BlendIcon(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="M1 6C1 5.364 1.117 4.75 1.351 4.159C1.605 3.517 1.976 2.952 2.464 2.464C2.952 1.975 3.517 1.604 4.159 1.35C4.75 1.116 5.364 0.998 6 0.998C6.636 0.998 7.25 1.116 7.841 1.35C8.483 1.604 9.048 1.975 9.536 2.464C10.024 2.952 10.395 3.517 10.649 4.159C10.769 4.462 10.858 4.77 10.916 5.084C11.23 5.142 11.538 5.231 11.84 5.351C12.482 5.605 13.047 5.976 13.536 6.464C14.024 6.953 14.395 7.518 14.649 8.16C14.883 8.751 15 9.364 15 10C15 10.636 14.883 11.249 14.649 11.84C14.395 12.482 14.024 13.047 13.536 13.536C13.047 14.024 12.482 14.395 11.84 14.649C11.249 14.883 10.636 15 10 15C9.364 15 8.751 14.883 8.16 14.649C7.518 14.395 6.953 14.024 6.464 13.536C5.976 13.047 5.605 12.482 5.351 11.84C5.232 11.539 5.143 11.231 5.084 10.918C4.77 10.859 4.462 10.77 4.159 10.65C3.517 10.396 2.952 10.025 2.464 9.536C1.976 9.048 1.605 8.483 1.351 7.841C1.117 7.25 1 6.636 1 6L1 6L1 6ZM2 6C2 6.509 2.093 7 2.28 7.473C2.484 7.987 2.781 8.439 3.171 8.829C3.562 9.22 4.014 9.517 4.527 9.721C4.683 9.782 4.842 9.834 5.002 9.875C5.016 9.284 5.132 8.712 5.351 8.16C5.605 7.518 5.976 6.953 6.464 6.464C6.953 5.976 7.518 5.605 8.16 5.351C8.712 5.132 9.283 5.016 9.874 5.002C9.833 4.841 9.781 4.683 9.72 4.527C9.516 4.013 9.219 3.561 8.829 3.171C8.438 2.78 7.986 2.483 7.473 2.279C7 2.092 6.509 1.998 6 1.998C5.491 1.998 5 2.092 4.527 2.279C4.014 2.483 3.562 2.78 3.171 3.171C2.781 3.561 2.484 4.013 2.28 4.527C2.093 5 2 5.491 2 6L2 6L2 6ZM6 10.002C6.509 10.002 7 9.908 7.473 9.721C7.986 9.517 8.438 9.22 8.829 8.829C9.219 8.439 9.516 7.987 9.72 7.473C9.907 7 10 6.509 10 6C9.491 6 9.001 6.094 8.528 6.281C8.014 6.484 7.562 6.781 7.172 7.172C6.781 7.562 6.484 8.014 6.281 8.528C6.094 9.001 6 9.491 6 10L6 10.001L6 10.002ZM7.172 12.828C7.562 13.219 8.014 13.516 8.528 13.719C9.001 13.906 9.491 14 10 14C10.509 14 10.999 13.906 11.472 13.719C11.986 13.516 12.438 13.219 12.828 12.828C13.219 12.438 13.516 11.986 13.719 11.472C13.906 10.999 14 10.509 14 10C14 9.491 13.906 9.001 13.719 8.528C13.516 8.014 13.219 7.562 12.828 7.172C12.438 6.781 11.986 6.484 11.472 6.281C11.316 6.219 11.158 6.168 10.999 6.126C10.984 6.717 10.868 7.289 10.649 7.841C10.395 8.483 10.024 9.048 9.536 9.536C9.048 10.025 8.483 10.396 7.841 10.65C7.289 10.869 6.717 10.985 6.127 11C6.168 11.159 6.219 11.317 6.281 11.472C6.484 11.986 6.781 12.438 7.172 12.828Z" />
    </svg>
  );
}

Vue

Vue: see /icons/blend.md

Svelte

Svelte: see /icons/blend.md

HTML img

HTML img: see /icons/blend.md

CSS

CSS: see /icons/blend.md

Data URL

Data URL: see /icons/blend.md

Sprite

Sprite: see /icons/blend.md

SwiftUI

SwiftUI: see /icons/blend.md

Compose

Compose: see /icons/blend.md

Android XML

Android XML: see /icons/blend.md

Flutter

Flutter: see /icons/blend.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 { BlendIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

blend mode, blending mode

Alternatives

transparency: opacity alone, without a blend mode

Don’t confuse with

boolean-intersect: overlap as a shape operation, not color mixing

Also fits

transparency: a blend mode

Tags

blend, blend mode, blending, mix, multiply, screen, overlay, layer, opacity, compositing, circles, photoshop, figma

Category

Design

Component name

BlendIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More design icons

align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons

For agents

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

blend icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More design icons

For agents

blend icon