clover icon

clover-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: clover-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

clover clover-bold clover-duotone clover-fill clover-thin

The same icon in other sets

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

Use the clover icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M210.86 163.71C223.56 158.21 230 143.5 230 120s-6.44-38.21-19.14-43.71c-14.5-6.29-34 1.5-51 11.8c10.3-16.93 18.08-36.45 11.8-50.95C166.21 24.44 151.5 18 128 18s-38.21 6.44-43.71 19.14c-6.28 14.5 1.5 34 11.8 51C79.17 77.79 59.64 70 45.14 76.29C32.44 81.79 26 96.5 26 120s6.44 38.21 19.14 43.71A29.1 29.1 0 0 0 56.78 166c12.42 0 26.6-6.33 39.32-14.08c-10.31 16.93-18.1 36.46-11.81 51C89.79 215.56 104.5 222 128 222s38.21-6.44 43.71-19.14c3-6.82 2.79-14.76.72-23c12.62 18.21 24.22 39.49 29.75 61.6A6 6 0 0 0 208 246a6 6 0 0 0 1.46-.18a6 6 0 0 0 4.36-7.28c-7.56-30.24-25.2-58.44-42.18-80.2c9.32 4.51 18.88 7.63 27.58 7.63a29.1 29.1 0 0 0 11.64-2.26M95.3 41.91C98.73 34 109.73 30 128 30s29.27 4 32.7 11.91c3.9 9-1.11 24.85-14.11 44.61A247 247 0 0 1 128 111a247 247 0 0 1-18.59-24.45c-13-19.79-18.01-35.64-14.11-44.64M49.91 152.7C42 149.27 38 138.27 38 120s4-29.27 11.91-32.7a17.5 17.5 0 0 1 7-1.29c9.26 0 22.27 5.28 37.65 15.4A246 246 0 0 1 119 120a246 246 0 0 1-24.45 18.59c-19.79 13-35.64 18.01-44.64 14.11m110.79 45.39C157.27 206 146.27 210 128 210s-29.27-4-32.7-11.91c-3.9-9 1.11-24.85 14.11-44.61A246 246 0 0 1 128 129a246 246 0 0 1 18.59 24.45c13 19.79 18.01 35.63 14.11 44.64m.78-59.5A246 246 0 0 1 137 120a246 246 0 0 1 24.45-18.59c19.76-13 35.61-18 44.61-14.11C214 90.73 218 101.73 218 120s-4 29.27-11.91 32.7c-9 3.9-24.85-1.11-44.61-14.11"/></svg>

React

import type { SVGProps } from "react";

export function PhCloverLight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M210.86 163.71C223.56 158.21 230 143.5 230 120s-6.44-38.21-19.14-43.71c-14.5-6.29-34 1.5-51 11.8c10.3-16.93 18.08-36.45 11.8-50.95C166.21 24.44 151.5 18 128 18s-38.21 6.44-43.71 19.14c-6.28 14.5 1.5 34 11.8 51C79.17 77.79 59.64 70 45.14 76.29C32.44 81.79 26 96.5 26 120s6.44 38.21 19.14 43.71A29.1 29.1 0 0 0 56.78 166c12.42 0 26.6-6.33 39.32-14.08c-10.31 16.93-18.1 36.46-11.81 51C89.79 215.56 104.5 222 128 222s38.21-6.44 43.71-19.14c3-6.82 2.79-14.76.72-23c12.62 18.21 24.22 39.49 29.75 61.6A6 6 0 0 0 208 246a6 6 0 0 0 1.46-.18a6 6 0 0 0 4.36-7.28c-7.56-30.24-25.2-58.44-42.18-80.2c9.32 4.51 18.88 7.63 27.58 7.63a29.1 29.1 0 0 0 11.64-2.26M95.3 41.91C98.73 34 109.73 30 128 30s29.27 4 32.7 11.91c3.9 9-1.11 24.85-14.11 44.61A247 247 0 0 1 128 111a247 247 0 0 1-18.59-24.45c-13-19.79-18.01-35.64-14.11-44.64M49.91 152.7C42 149.27 38 138.27 38 120s4-29.27 11.91-32.7a17.5 17.5 0 0 1 7-1.29c9.26 0 22.27 5.28 37.65 15.4A246 246 0 0 1 119 120a246 246 0 0 1-24.45 18.59c-19.79 13-35.64 18.01-44.64 14.11m110.79 45.39C157.27 206 146.27 210 128 210s-29.27-4-32.7-11.91c-3.9-9 1.11-24.85 14.11-44.61A246 246 0 0 1 128 129a246 246 0 0 1 18.59 24.45c13 19.79 18.01 35.63 14.11 44.64m.78-59.5A246 246 0 0 1 137 120a246 246 0 0 1 24.45-18.59c19.76-13 35.61-18 44.61-14.11C214 90.73 218 101.73 218 120s-4 29.27-11.91 32.7c-9 3.9-24.85-1.11-44.61-14.11"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M210.86 163.71C223.56 158.21 230 143.5 230 120s-6.44-38.21-19.14-43.71c-14.5-6.29-34 1.5-51 11.8c10.3-16.93 18.08-36.45 11.8-50.95C166.21 24.44 151.5 18 128 18s-38.21 6.44-43.71 19.14c-6.28 14.5 1.5 34 11.8 51C79.17 77.79 59.64 70 45.14 76.29C32.44 81.79 26 96.5 26 120s6.44 38.21 19.14 43.71A29.1 29.1 0 0 0 56.78 166c12.42 0 26.6-6.33 39.32-14.08c-10.31 16.93-18.1 36.46-11.81 51C89.79 215.56 104.5 222 128 222s38.21-6.44 43.71-19.14c3-6.82 2.79-14.76.72-23c12.62 18.21 24.22 39.49 29.75 61.6A6 6 0 0 0 208 246a6 6 0 0 0 1.46-.18a6 6 0 0 0 4.36-7.28c-7.56-30.24-25.2-58.44-42.18-80.2c9.32 4.51 18.88 7.63 27.58 7.63a29.1 29.1 0 0 0 11.64-2.26M95.3 41.91C98.73 34 109.73 30 128 30s29.27 4 32.7 11.91c3.9 9-1.11 24.85-14.11 44.61A247 247 0 0 1 128 111a247 247 0 0 1-18.59-24.45c-13-19.79-18.01-35.64-14.11-44.64M49.91 152.7C42 149.27 38 138.27 38 120s4-29.27 11.91-32.7a17.5 17.5 0 0 1 7-1.29c9.26 0 22.27 5.28 37.65 15.4A246 246 0 0 1 119 120a246 246 0 0 1-24.45 18.59c-19.79 13-35.64 18.01-44.64 14.11m110.79 45.39C157.27 206 146.27 210 128 210s-29.27-4-32.7-11.91c-3.9-9 1.11-24.85 14.11-44.61A246 246 0 0 1 128 129a246 246 0 0 1 18.59 24.45c13 19.79 18.01 35.63 14.11 44.64m.78-59.5A246 246 0 0 1 137 120a246 246 0 0 1 24.45-18.59c19.76-13 35.61-18 44.61-14.11C214 90.73 218 101.73 218 120s-4 29.27-11.91 32.7c-9 3.9-24.85-1.11-44.61-14.11"/></svg>
</template>

CSS

.icon-clover-light {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M210.86%20163.71C223.56%20158.21%20230%20143.5%20230%20120s-6.44-38.21-19.14-43.71c-14.5-6.29-34%201.5-51%2011.8c10.3-16.93%2018.08-36.45%2011.8-50.95C166.21%2024.44%20151.5%2018%20128%2018s-38.21%206.44-43.71%2019.14c-6.28%2014.5%201.5%2034%2011.8%2051C79.17%2077.79%2059.64%2070%2045.14%2076.29C32.44%2081.79%2026%2096.5%2026%20120s6.44%2038.21%2019.14%2043.71A29.1%2029.1%200%200%200%2056.78%20166c12.42%200%2026.6-6.33%2039.32-14.08c-10.31%2016.93-18.1%2036.46-11.81%2051C89.79%20215.56%20104.5%20222%20128%20222s38.21-6.44%2043.71-19.14c3-6.82%202.79-14.76.72-23c12.62%2018.21%2024.22%2039.49%2029.75%2061.6A6%206%200%200%200%20208%20246a6%206%200%200%200%201.46-.18a6%206%200%200%200%204.36-7.28c-7.56-30.24-25.2-58.44-42.18-80.2c9.32%204.51%2018.88%207.63%2027.58%207.63a29.1%2029.1%200%200%200%2011.64-2.26M95.3%2041.91C98.73%2034%20109.73%2030%20128%2030s29.27%204%2032.7%2011.91c3.9%209-1.11%2024.85-14.11%2044.61A247%20247%200%200%201%20128%20111a247%20247%200%200%201-18.59-24.45c-13-19.79-18.01-35.64-14.11-44.64M49.91%20152.7C42%20149.27%2038%20138.27%2038%20120s4-29.27%2011.91-32.7a17.5%2017.5%200%200%201%207-1.29c9.26%200%2022.27%205.28%2037.65%2015.4A246%20246%200%200%201%20119%20120a246%20246%200%200%201-24.45%2018.59c-19.79%2013-35.64%2018.01-44.64%2014.11m110.79%2045.39C157.27%20206%20146.27%20210%20128%20210s-29.27-4-32.7-11.91c-3.9-9%201.11-24.85%2014.11-44.61A246%20246%200%200%201%20128%20129a246%20246%200%200%201%2018.59%2024.45c13%2019.79%2018.01%2035.63%2014.11%2044.64m.78-59.5A246%20246%200%200%201%20137%20120a246%20246%200%200%201%2024.45-18.59c19.76-13%2035.61-18%2044.61-14.11C214%2090.73%20218%20101.73%20218%20120s-4%2029.27-11.91%2032.7c-9%203.9-24.85-1.11-44.61-14.11%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M210.86%20163.71C223.56%20158.21%20230%20143.5%20230%20120s-6.44-38.21-19.14-43.71c-14.5-6.29-34%201.5-51%2011.8c10.3-16.93%2018.08-36.45%2011.8-50.95C166.21%2024.44%20151.5%2018%20128%2018s-38.21%206.44-43.71%2019.14c-6.28%2014.5%201.5%2034%2011.8%2051C79.17%2077.79%2059.64%2070%2045.14%2076.29C32.44%2081.79%2026%2096.5%2026%20120s6.44%2038.21%2019.14%2043.71A29.1%2029.1%200%200%200%2056.78%20166c12.42%200%2026.6-6.33%2039.32-14.08c-10.31%2016.93-18.1%2036.46-11.81%2051C89.79%20215.56%20104.5%20222%20128%20222s38.21-6.44%2043.71-19.14c3-6.82%202.79-14.76.72-23c12.62%2018.21%2024.22%2039.49%2029.75%2061.6A6%206%200%200%200%20208%20246a6%206%200%200%200%201.46-.18a6%206%200%200%200%204.36-7.28c-7.56-30.24-25.2-58.44-42.18-80.2c9.32%204.51%2018.88%207.63%2027.58%207.63a29.1%2029.1%200%200%200%2011.64-2.26M95.3%2041.91C98.73%2034%20109.73%2030%20128%2030s29.27%204%2032.7%2011.91c3.9%209-1.11%2024.85-14.11%2044.61A247%20247%200%200%201%20128%20111a247%20247%200%200%201-18.59-24.45c-13-19.79-18.01-35.64-14.11-44.64M49.91%20152.7C42%20149.27%2038%20138.27%2038%20120s4-29.27%2011.91-32.7a17.5%2017.5%200%200%201%207-1.29c9.26%200%2022.27%205.28%2037.65%2015.4A246%20246%200%200%201%20119%20120a246%20246%200%200%201-24.45%2018.59c-19.79%2013-35.64%2018.01-44.64%2014.11m110.79%2045.39C157.27%20206%20146.27%20210%20128%20210s-29.27-4-32.7-11.91c-3.9-9%201.11-24.85%2014.11-44.61A246%20246%200%200%201%20128%20129a246%20246%200%200%201%2018.59%2024.45c13%2019.79%2018.01%2035.63%2014.11%2044.64m.78-59.5A246%20246%200%200%201%20137%20120a246%20246%200%200%201%2024.45-18.59c19.76-13%2035.61-18%2044.61-14.11C214%2090.73%20218%20101.73%20218%20120s-4%2029.27-11.91%2032.7c-9%203.9-24.85-1.11-44.61-14.11%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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