clover icon

clover from Material Design Icons by Pictogrammers · Filled · Nature · Apache-2.0 Free for personal and commercial use.

Name: clover
Set: Material Design Icons
Style: Filled
Category: Nature
Viewbox: 24×24
License: Apache 2.0
Aliases: luck

1 other variant in Material Design Icons

The same icon in other sets

cloverFont Awesome 6 Solid cloverFont Awesome Solid clover-12-filledFluent UI System Icons cloverHuge Icons cloverLucide cloverPhosphor cloverTabler Icons cloverWeb3 Icons cloverWeb3 Icons Branded

More nature icons from Material Design Icons

cactus feather hexagon-multiple-outline image-filter-hdr image-filter-vintage ladybug landslide leaf-maple-off nature-outline palm-tree spa terrain tsunami volcano waves-arrow-left waves-arrow-right waves-arrow-up

Use the clover icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 11.18c3.3-3 5-4.54 5-6.49C17 3.19 15.75 2 14.25 2c-.86 0-1.68.36-2.25 1c-.57-.64-1.39-1-2.31-1C8.19 2 7 3.25 7 4.75c0 1.89 1.7 3.43 5 6.43m-.82.82c-3-3.3-4.54-5-6.49-5C3.19 7 2 8.25 2 9.75c0 .86.36 1.68 1 2.25c-.64.57-1 1.39-1 2.31C2 15.81 3.25 17 4.75 17c1.89 0 3.43-1.7 6.43-5m1.65 0c2.99 3.3 4.53 5 6.48 5c1.5 0 2.69-1.25 2.69-2.75c0-.86-.36-1.68-1-2.25c.64-.57 1-1.39 1-2.31C22 8.19 20.75 7 19.25 7c-1.89 0-3.43 1.7-6.42 5m-.83.82c-3.3 3-5 4.54-5 6.49C7 20.81 8.25 22 9.75 22c.86 0 1.68-.36 2.25-1c.57.64 1.39 1 2.31 1c1.5 0 2.69-1.25 2.69-2.75c0-1.89-1.7-3.43-5-6.43"/></svg>

React

import type { SVGProps } from "react";

export function MdiClover(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" d="M12 11.18c3.3-3 5-4.54 5-6.49C17 3.19 15.75 2 14.25 2c-.86 0-1.68.36-2.25 1c-.57-.64-1.39-1-2.31-1C8.19 2 7 3.25 7 4.75c0 1.89 1.7 3.43 5 6.43m-.82.82c-3-3.3-4.54-5-6.49-5C3.19 7 2 8.25 2 9.75c0 .86.36 1.68 1 2.25c-.64.57-1 1.39-1 2.31C2 15.81 3.25 17 4.75 17c1.89 0 3.43-1.7 6.43-5m1.65 0c2.99 3.3 4.53 5 6.48 5c1.5 0 2.69-1.25 2.69-2.75c0-.86-.36-1.68-1-2.25c.64-.57 1-1.39 1-2.31C22 8.19 20.75 7 19.25 7c-1.89 0-3.43 1.7-6.42 5m-.83.82c-3.3 3-5 4.54-5 6.49C7 20.81 8.25 22 9.75 22c.86 0 1.68-.36 2.25-1c.57.64 1.39 1 2.31 1c1.5 0 2.69-1.25 2.69-2.75c0-1.89-1.7-3.43-5-6.43"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 11.18c3.3-3 5-4.54 5-6.49C17 3.19 15.75 2 14.25 2c-.86 0-1.68.36-2.25 1c-.57-.64-1.39-1-2.31-1C8.19 2 7 3.25 7 4.75c0 1.89 1.7 3.43 5 6.43m-.82.82c-3-3.3-4.54-5-6.49-5C3.19 7 2 8.25 2 9.75c0 .86.36 1.68 1 2.25c-.64.57-1 1.39-1 2.31C2 15.81 3.25 17 4.75 17c1.89 0 3.43-1.7 6.43-5m1.65 0c2.99 3.3 4.53 5 6.48 5c1.5 0 2.69-1.25 2.69-2.75c0-.86-.36-1.68-1-2.25c.64-.57 1-1.39 1-2.31C22 8.19 20.75 7 19.25 7c-1.89 0-3.43 1.7-6.42 5m-.83.82c-3.3 3-5 4.54-5 6.49C7 20.81 8.25 22 9.75 22c.86 0 1.68-.36 2.25-1c.57.64 1.39 1 2.31 1c1.5 0 2.69-1.25 2.69-2.75c0-1.89-1.7-3.43-5-6.43"/></svg>
</template>

CSS

.icon-clover {
  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%20d%3D%22M12%2011.18c3.3-3%205-4.54%205-6.49C17%203.19%2015.75%202%2014.25%202c-.86%200-1.68.36-2.25%201c-.57-.64-1.39-1-2.31-1C8.19%202%207%203.25%207%204.75c0%201.89%201.7%203.43%205%206.43m-.82.82c-3-3.3-4.54-5-6.49-5C3.19%207%202%208.25%202%209.75c0%20.86.36%201.68%201%202.25c-.64.57-1%201.39-1%202.31C2%2015.81%203.25%2017%204.75%2017c1.89%200%203.43-1.7%206.43-5m1.65%200c2.99%203.3%204.53%205%206.48%205c1.5%200%202.69-1.25%202.69-2.75c0-.86-.36-1.68-1-2.25c.64-.57%201-1.39%201-2.31C22%208.19%2020.75%207%2019.25%207c-1.89%200-3.43%201.7-6.42%205m-.83.82c-3.3%203-5%204.54-5%206.49C7%2020.81%208.25%2022%209.75%2022c.86%200%201.68-.36%202.25-1c.57.64%201.39%201%202.31%201c1.5%200%202.69-1.25%202.69-2.75c0-1.89-1.7-3.43-5-6.43%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%20d%3D%22M12%2011.18c3.3-3%205-4.54%205-6.49C17%203.19%2015.75%202%2014.25%202c-.86%200-1.68.36-2.25%201c-.57-.64-1.39-1-2.31-1C8.19%202%207%203.25%207%204.75c0%201.89%201.7%203.43%205%206.43m-.82.82c-3-3.3-4.54-5-6.49-5C3.19%207%202%208.25%202%209.75c0%20.86.36%201.68%201%202.25c-.64.57-1%201.39-1%202.31C2%2015.81%203.25%2017%204.75%2017c1.89%200%203.43-1.7%206.43-5m1.65%200c2.99%203.3%204.53%205%206.48%205c1.5%200%202.69-1.25%202.69-2.75c0-.86-.36-1.68-1-2.25c.64-.57%201-1.39%201-2.31C22%208.19%2020.75%207%2019.25%207c-1.89%200-3.43%201.7-6.42%205m-.83.82c-3.3%203-5%204.54-5%206.49C7%2020.81%208.25%2022%209.75%2022c.86%200%201.68-.36%202.25-1c.57.64%201.39%201%202.31%201c1.5%200%202.69-1.25%202.69-2.75c0-1.89-1.7-3.43-5-6.43%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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