stripe-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.

Name
stripe-fill
Set
MingCute Icon
Style
Fill
Viewbox
24×24
License
Apache 2.0

1 other variant in MingCute Icon

The same icon in other sets

Use the stripe icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M10.729 8.36c0-.771.63-1.068 1.675-1.068c1.112 0 2.442.251 3.666.712c.567.214 1.222-.182 1.222-.789V4.588a.95.95 0 0 0-.636-.912C15.236 3.195 13.828 3 12.404 3C8.403 3 5.742 5.097 5.742 8.598c0 5.46 7.49 4.589 7.49 6.943c0 .91-.788 1.206-1.892 1.206c-1.255 0-2.777-.396-4.165-.99c-.56-.24-1.216.152-1.216.76v2.698c0 .4.236.763.61.904c1.632.615 3.263.881 4.77.881c4.1 0 6.919-2.037 6.919-5.578c-.02-5.895-7.53-4.846-7.53-7.062" clip-rule="evenodd"/></svg>

React

import type { SVGProps } from "react";

export function MingcuteStripeFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="M10.729 8.36c0-.771.63-1.068 1.675-1.068c1.112 0 2.442.251 3.666.712c.567.214 1.222-.182 1.222-.789V4.588a.95.95 0 0 0-.636-.912C15.236 3.195 13.828 3 12.404 3C8.403 3 5.742 5.097 5.742 8.598c0 5.46 7.49 4.589 7.49 6.943c0 .91-.788 1.206-1.892 1.206c-1.255 0-2.777-.396-4.165-.99c-.56-.24-1.216.152-1.216.76v2.698c0 .4.236.763.61.904c1.632.615 3.263.881 4.77.881c4.1 0 6.919-2.037 6.919-5.578c-.02-5.895-7.53-4.846-7.53-7.062" clipRule="evenodd"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M10.729 8.36c0-.771.63-1.068 1.675-1.068c1.112 0 2.442.251 3.666.712c.567.214 1.222-.182 1.222-.789V4.588a.95.95 0 0 0-.636-.912C15.236 3.195 13.828 3 12.404 3C8.403 3 5.742 5.097 5.742 8.598c0 5.46 7.49 4.589 7.49 6.943c0 .91-.788 1.206-1.892 1.206c-1.255 0-2.777-.396-4.165-.99c-.56-.24-1.216.152-1.216.76v2.698c0 .4.236.763.61.904c1.632.615 3.263.881 4.77.881c4.1 0 6.919-2.037 6.919-5.578c-.02-5.895-7.53-4.846-7.53-7.062" clip-rule="evenodd"/></svg>
</template>

CSS

.icon-stripe-fill {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.729%208.36c0-.771.63-1.068%201.675-1.068c1.112%200%202.442.251%203.666.712c.567.214%201.222-.182%201.222-.789V4.588a.95.95%200%200%200-.636-.912C15.236%203.195%2013.828%203%2012.404%203C8.403%203%205.742%205.097%205.742%208.598c0%205.46%207.49%204.589%207.49%206.943c0%20.91-.788%201.206-1.892%201.206c-1.255%200-2.777-.396-4.165-.99c-.56-.24-1.216.152-1.216.76v2.698c0%20.4.236.763.61.904c1.632.615%203.263.881%204.77.881c4.1%200%206.919-2.037%206.919-5.578c-.02-5.895-7.53-4.846-7.53-7.062%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.729%208.36c0-.771.63-1.068%201.675-1.068c1.112%200%202.442.251%203.666.712c.567.214%201.222-.182%201.222-.789V4.588a.95.95%200%200%200-.636-.912C15.236%203.195%2013.828%203%2012.404%203C8.403%203%205.742%205.097%205.742%208.598c0%205.46%207.49%204.589%207.49%206.943c0%20.91-.788%201.206-1.892%201.206c-1.255%200-2.777-.396-4.165-.99c-.56-.24-1.216.152-1.216.76v2.698c0%20.4.236.763.61.904c1.632.615%203.263.881%204.77.881c4.1%200%206.919-2.037%206.919-5.578c-.02-5.895-7.53-4.846-7.53-7.062%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mingcute/stripe-fill.svg?color=%231a73e8&size=48