dial icon

dial-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.

Name: dial-fill
Set: Framework7 Icons
Style: Fill
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

Use the dial icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M25.246 7.539a2.756 2.756 0 0 0 2.766 2.766c1.523 0 2.742-1.242 2.742-2.766a2.746 2.746 0 0 0-2.742-2.742a2.75 2.75 0 0 0-2.766 2.742m16.992 7.078a2.746 2.746 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.743-2.742a2.716 2.716 0 0 0-2.742-2.742a2.73 2.73 0 0 0-2.743 2.742m-33.984.047a2.73 2.73 0 0 0 2.742 2.742a2.746 2.746 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.716 2.716 0 0 0-2.742 2.742m3.61 16.875c0 3.797 1.312 7.266 3.491 10.031L26.91 29.992c.61-.61 1.711-.61 2.297 0c.656.703.656 1.688 0 2.344L17.652 43.914a16.05 16.05 0 0 0 10.36 3.773c8.883 0 16.125-7.195 16.125-16.148c0-8.93-7.242-16.125-16.125-16.125c-8.907 0-16.149 7.195-16.149 16.125m-10.594 0a2.73 2.73 0 0 0 2.742 2.742a2.746 2.746 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.716 2.716 0 0 0-2.742 2.742m47.976 0a2.746 2.746 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.742-2.742a2.716 2.716 0 0 0-2.742-2.742a2.73 2.73 0 0 0-2.742 2.742M8.254 48.438a2.716 2.716 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.742-2.742a2.746 2.746 0 0 0-2.742-2.743a2.73 2.73 0 0 0-2.742 2.742m33.96.023a2.73 2.73 0 0 0 2.743 2.742a2.716 2.716 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.746 2.746 0 0 0-2.742 2.742"/></svg>

React

import type { SVGProps } from "react";

export function F7DialFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M25.246 7.539a2.756 2.756 0 0 0 2.766 2.766c1.523 0 2.742-1.242 2.742-2.766a2.746 2.746 0 0 0-2.742-2.742a2.75 2.75 0 0 0-2.766 2.742m16.992 7.078a2.746 2.746 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.743-2.742a2.716 2.716 0 0 0-2.742-2.742a2.73 2.73 0 0 0-2.743 2.742m-33.984.047a2.73 2.73 0 0 0 2.742 2.742a2.746 2.746 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.716 2.716 0 0 0-2.742 2.742m3.61 16.875c0 3.797 1.312 7.266 3.491 10.031L26.91 29.992c.61-.61 1.711-.61 2.297 0c.656.703.656 1.688 0 2.344L17.652 43.914a16.05 16.05 0 0 0 10.36 3.773c8.883 0 16.125-7.195 16.125-16.148c0-8.93-7.242-16.125-16.125-16.125c-8.907 0-16.149 7.195-16.149 16.125m-10.594 0a2.73 2.73 0 0 0 2.742 2.742a2.746 2.746 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.716 2.716 0 0 0-2.742 2.742m47.976 0a2.746 2.746 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.742-2.742a2.716 2.716 0 0 0-2.742-2.742a2.73 2.73 0 0 0-2.742 2.742M8.254 48.438a2.716 2.716 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.742-2.742a2.746 2.746 0 0 0-2.742-2.743a2.73 2.73 0 0 0-2.742 2.742m33.96.023a2.73 2.73 0 0 0 2.743 2.742a2.716 2.716 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.746 2.746 0 0 0-2.742 2.742"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M25.246 7.539a2.756 2.756 0 0 0 2.766 2.766c1.523 0 2.742-1.242 2.742-2.766a2.746 2.746 0 0 0-2.742-2.742a2.75 2.75 0 0 0-2.766 2.742m16.992 7.078a2.746 2.746 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.743-2.742a2.716 2.716 0 0 0-2.742-2.742a2.73 2.73 0 0 0-2.743 2.742m-33.984.047a2.73 2.73 0 0 0 2.742 2.742a2.746 2.746 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.716 2.716 0 0 0-2.742 2.742m3.61 16.875c0 3.797 1.312 7.266 3.491 10.031L26.91 29.992c.61-.61 1.711-.61 2.297 0c.656.703.656 1.688 0 2.344L17.652 43.914a16.05 16.05 0 0 0 10.36 3.773c8.883 0 16.125-7.195 16.125-16.148c0-8.93-7.242-16.125-16.125-16.125c-8.907 0-16.149 7.195-16.149 16.125m-10.594 0a2.73 2.73 0 0 0 2.742 2.742a2.746 2.746 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.716 2.716 0 0 0-2.742 2.742m47.976 0a2.746 2.746 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.742-2.742a2.716 2.716 0 0 0-2.742-2.742a2.73 2.73 0 0 0-2.742 2.742M8.254 48.438a2.716 2.716 0 0 0 2.742 2.742a2.73 2.73 0 0 0 2.742-2.742a2.746 2.746 0 0 0-2.742-2.743a2.73 2.73 0 0 0-2.742 2.742m33.96.023a2.73 2.73 0 0 0 2.743 2.742a2.716 2.716 0 0 0 2.742-2.742a2.73 2.73 0 0 0-2.742-2.742a2.746 2.746 0 0 0-2.742 2.742"/></svg>
</template>

CSS

.icon-dial-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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M25.246%207.539a2.756%202.756%200%200%200%202.766%202.766c1.523%200%202.742-1.242%202.742-2.766a2.746%202.746%200%200%200-2.742-2.742a2.75%202.75%200%200%200-2.766%202.742m16.992%207.078a2.746%202.746%200%200%200%202.742%202.742a2.73%202.73%200%200%200%202.743-2.742a2.716%202.716%200%200%200-2.742-2.742a2.73%202.73%200%200%200-2.743%202.742m-33.984.047a2.73%202.73%200%200%200%202.742%202.742a2.746%202.746%200%200%200%202.742-2.742a2.73%202.73%200%200%200-2.742-2.742a2.716%202.716%200%200%200-2.742%202.742m3.61%2016.875c0%203.797%201.312%207.266%203.491%2010.031L26.91%2029.992c.61-.61%201.711-.61%202.297%200c.656.703.656%201.688%200%202.344L17.652%2043.914a16.05%2016.05%200%200%200%2010.36%203.773c8.883%200%2016.125-7.195%2016.125-16.148c0-8.93-7.242-16.125-16.125-16.125c-8.907%200-16.149%207.195-16.149%2016.125m-10.594%200a2.73%202.73%200%200%200%202.742%202.742a2.746%202.746%200%200%200%202.742-2.742a2.73%202.73%200%200%200-2.742-2.742a2.716%202.716%200%200%200-2.742%202.742m47.976%200a2.746%202.746%200%200%200%202.742%202.742a2.73%202.73%200%200%200%202.742-2.742a2.716%202.716%200%200%200-2.742-2.742a2.73%202.73%200%200%200-2.742%202.742M8.254%2048.438a2.716%202.716%200%200%200%202.742%202.742a2.73%202.73%200%200%200%202.742-2.742a2.746%202.746%200%200%200-2.742-2.743a2.73%202.73%200%200%200-2.742%202.742m33.96.023a2.73%202.73%200%200%200%202.743%202.742a2.716%202.716%200%200%200%202.742-2.742a2.73%202.73%200%200%200-2.742-2.742a2.746%202.746%200%200%200-2.742%202.742%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M25.246%207.539a2.756%202.756%200%200%200%202.766%202.766c1.523%200%202.742-1.242%202.742-2.766a2.746%202.746%200%200%200-2.742-2.742a2.75%202.75%200%200%200-2.766%202.742m16.992%207.078a2.746%202.746%200%200%200%202.742%202.742a2.73%202.73%200%200%200%202.743-2.742a2.716%202.716%200%200%200-2.742-2.742a2.73%202.73%200%200%200-2.743%202.742m-33.984.047a2.73%202.73%200%200%200%202.742%202.742a2.746%202.746%200%200%200%202.742-2.742a2.73%202.73%200%200%200-2.742-2.742a2.716%202.716%200%200%200-2.742%202.742m3.61%2016.875c0%203.797%201.312%207.266%203.491%2010.031L26.91%2029.992c.61-.61%201.711-.61%202.297%200c.656.703.656%201.688%200%202.344L17.652%2043.914a16.05%2016.05%200%200%200%2010.36%203.773c8.883%200%2016.125-7.195%2016.125-16.148c0-8.93-7.242-16.125-16.125-16.125c-8.907%200-16.149%207.195-16.149%2016.125m-10.594%200a2.73%202.73%200%200%200%202.742%202.742a2.746%202.746%200%200%200%202.742-2.742a2.73%202.73%200%200%200-2.742-2.742a2.716%202.716%200%200%200-2.742%202.742m47.976%200a2.746%202.746%200%200%200%202.742%202.742a2.73%202.73%200%200%200%202.742-2.742a2.716%202.716%200%200%200-2.742-2.742a2.73%202.73%200%200%200-2.742%202.742M8.254%2048.438a2.716%202.716%200%200%200%202.742%202.742a2.73%202.73%200%200%200%202.742-2.742a2.746%202.746%200%200%200-2.742-2.743a2.73%202.73%200%200%200-2.742%202.742m33.96.023a2.73%202.73%200%200%200%202.743%202.742a2.716%202.716%200%200%200%202.742-2.742a2.73%202.73%200%200%200-2.742-2.742a2.746%202.746%200%200%200-2.742%202.742%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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