focus icon

focus-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.

Name: focus-fill
Set: Mage Icons
Style: Fill
Viewbox: 24×24
License: Apache 2.0

1 other variant in Mage Icons

The same icon in other sets

focusHuge Icons focusIconPark focusIconPark Outline focusIconPark Solid focusIconPark TwoTone focusLucide focusMyna UI Icons focus-fillRemix Icon focusTabler Icons focusTDesign Icons focusUnicons

Use the focus icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.228 9.06a.743.743 0 0 1-.743-.742V6.489a1.976 1.976 0 0 0-1.98-1.977h-2.752a.743.743 0 0 1-.743-.741a.74.74 0 0 1 .742-.741h2.753a3.52 3.52 0 0 1 2.466 1.027A3.5 3.5 0 0 1 21 6.52v1.829a.75.75 0 0 1-.772.711m-2.723 11.89h-2.752a.743.743 0 0 1-.526-1.265a.74.74 0 0 1 .525-.217h2.753a1.98 1.98 0 0 0 1.98-1.977v-1.809a.741.741 0 0 1 1.268-.524a.74.74 0 0 1 .217.524v1.829a3.5 3.5 0 0 1-1.03 2.461A3.52 3.52 0 0 1 17.476 21zm-8.267 0H6.485a3.5 3.5 0 0 1-2.465-1.025A3.5 3.5 0 0 1 3 17.461v-1.779a.74.74 0 0 1 1.268-.524a.74.74 0 0 1 .217.524v1.829a1.975 1.975 0 0 0 1.98 1.977h2.753a.743.743 0 0 1 .742.741a.74.74 0 0 1-.742.741zM3.743 9.06A.743.743 0 0 1 3 8.317V6.489c0-.923.367-1.81 1.02-2.464A3.5 3.5 0 0 1 6.485 3h2.753a.743.743 0 0 1 .742.741a.74.74 0 0 1-.742.742H6.485a1.98 1.98 0 0 0-1.98 1.977v1.828a.75.75 0 0 1-.762.771m12.94 2.916a4.7 4.7 0 0 1-1.069 2.978a4.704 4.704 0 0 1-5.853 1.16a4.688 4.688 0 0 1-.392-8.045a4.71 4.71 0 0 1 6.96 2.109c.236.57.357 1.181.354 1.798"/></svg>

React

import type { SVGProps } from "react";

export function MageFocusFill(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="M20.228 9.06a.743.743 0 0 1-.743-.742V6.489a1.976 1.976 0 0 0-1.98-1.977h-2.752a.743.743 0 0 1-.743-.741a.74.74 0 0 1 .742-.741h2.753a3.52 3.52 0 0 1 2.466 1.027A3.5 3.5 0 0 1 21 6.52v1.829a.75.75 0 0 1-.772.711m-2.723 11.89h-2.752a.743.743 0 0 1-.526-1.265a.74.74 0 0 1 .525-.217h2.753a1.98 1.98 0 0 0 1.98-1.977v-1.809a.741.741 0 0 1 1.268-.524a.74.74 0 0 1 .217.524v1.829a3.5 3.5 0 0 1-1.03 2.461A3.52 3.52 0 0 1 17.476 21zm-8.267 0H6.485a3.5 3.5 0 0 1-2.465-1.025A3.5 3.5 0 0 1 3 17.461v-1.779a.74.74 0 0 1 1.268-.524a.74.74 0 0 1 .217.524v1.829a1.975 1.975 0 0 0 1.98 1.977h2.753a.743.743 0 0 1 .742.741a.74.74 0 0 1-.742.741zM3.743 9.06A.743.743 0 0 1 3 8.317V6.489c0-.923.367-1.81 1.02-2.464A3.5 3.5 0 0 1 6.485 3h2.753a.743.743 0 0 1 .742.741a.74.74 0 0 1-.742.742H6.485a1.98 1.98 0 0 0-1.98 1.977v1.828a.75.75 0 0 1-.762.771m12.94 2.916a4.7 4.7 0 0 1-1.069 2.978a4.704 4.704 0 0 1-5.853 1.16a4.688 4.688 0 0 1-.392-8.045a4.71 4.71 0 0 1 6.96 2.109c.236.57.357 1.181.354 1.798"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.228 9.06a.743.743 0 0 1-.743-.742V6.489a1.976 1.976 0 0 0-1.98-1.977h-2.752a.743.743 0 0 1-.743-.741a.74.74 0 0 1 .742-.741h2.753a3.52 3.52 0 0 1 2.466 1.027A3.5 3.5 0 0 1 21 6.52v1.829a.75.75 0 0 1-.772.711m-2.723 11.89h-2.752a.743.743 0 0 1-.526-1.265a.74.74 0 0 1 .525-.217h2.753a1.98 1.98 0 0 0 1.98-1.977v-1.809a.741.741 0 0 1 1.268-.524a.74.74 0 0 1 .217.524v1.829a3.5 3.5 0 0 1-1.03 2.461A3.52 3.52 0 0 1 17.476 21zm-8.267 0H6.485a3.5 3.5 0 0 1-2.465-1.025A3.5 3.5 0 0 1 3 17.461v-1.779a.74.74 0 0 1 1.268-.524a.74.74 0 0 1 .217.524v1.829a1.975 1.975 0 0 0 1.98 1.977h2.753a.743.743 0 0 1 .742.741a.74.74 0 0 1-.742.741zM3.743 9.06A.743.743 0 0 1 3 8.317V6.489c0-.923.367-1.81 1.02-2.464A3.5 3.5 0 0 1 6.485 3h2.753a.743.743 0 0 1 .742.741a.74.74 0 0 1-.742.742H6.485a1.98 1.98 0 0 0-1.98 1.977v1.828a.75.75 0 0 1-.762.771m12.94 2.916a4.7 4.7 0 0 1-1.069 2.978a4.704 4.704 0 0 1-5.853 1.16a4.688 4.688 0 0 1-.392-8.045a4.71 4.71 0 0 1 6.96 2.109c.236.57.357 1.181.354 1.798"/></svg>
</template>

CSS

.icon-focus-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%20d%3D%22M20.228%209.06a.743.743%200%200%201-.743-.742V6.489a1.976%201.976%200%200%200-1.98-1.977h-2.752a.743.743%200%200%201-.743-.741a.74.74%200%200%201%20.742-.741h2.753a3.52%203.52%200%200%201%202.466%201.027A3.5%203.5%200%200%201%2021%206.52v1.829a.75.75%200%200%201-.772.711m-2.723%2011.89h-2.752a.743.743%200%200%201-.526-1.265a.74.74%200%200%201%20.525-.217h2.753a1.98%201.98%200%200%200%201.98-1.977v-1.809a.741.741%200%200%201%201.268-.524a.74.74%200%200%201%20.217.524v1.829a3.5%203.5%200%200%201-1.03%202.461A3.52%203.52%200%200%201%2017.476%2021zm-8.267%200H6.485a3.5%203.5%200%200%201-2.465-1.025A3.5%203.5%200%200%201%203%2017.461v-1.779a.74.74%200%200%201%201.268-.524a.74.74%200%200%201%20.217.524v1.829a1.975%201.975%200%200%200%201.98%201.977h2.753a.743.743%200%200%201%20.742.741a.74.74%200%200%201-.742.741zM3.743%209.06A.743.743%200%200%201%203%208.317V6.489c0-.923.367-1.81%201.02-2.464A3.5%203.5%200%200%201%206.485%203h2.753a.743.743%200%200%201%20.742.741a.74.74%200%200%201-.742.742H6.485a1.98%201.98%200%200%200-1.98%201.977v1.828a.75.75%200%200%201-.762.771m12.94%202.916a4.7%204.7%200%200%201-1.069%202.978a4.704%204.704%200%200%201-5.853%201.16a4.688%204.688%200%200%201-.392-8.045a4.71%204.71%200%200%201%206.96%202.109c.236.57.357%201.181.354%201.798%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%22M20.228%209.06a.743.743%200%200%201-.743-.742V6.489a1.976%201.976%200%200%200-1.98-1.977h-2.752a.743.743%200%200%201-.743-.741a.74.74%200%200%201%20.742-.741h2.753a3.52%203.52%200%200%201%202.466%201.027A3.5%203.5%200%200%201%2021%206.52v1.829a.75.75%200%200%201-.772.711m-2.723%2011.89h-2.752a.743.743%200%200%201-.526-1.265a.74.74%200%200%201%20.525-.217h2.753a1.98%201.98%200%200%200%201.98-1.977v-1.809a.741.741%200%200%201%201.268-.524a.74.74%200%200%201%20.217.524v1.829a3.5%203.5%200%200%201-1.03%202.461A3.52%203.52%200%200%201%2017.476%2021zm-8.267%200H6.485a3.5%203.5%200%200%201-2.465-1.025A3.5%203.5%200%200%201%203%2017.461v-1.779a.74.74%200%200%201%201.268-.524a.74.74%200%200%201%20.217.524v1.829a1.975%201.975%200%200%200%201.98%201.977h2.753a.743.743%200%200%201%20.742.741a.74.74%200%200%201-.742.741zM3.743%209.06A.743.743%200%200%201%203%208.317V6.489c0-.923.367-1.81%201.02-2.464A3.5%203.5%200%200%201%206.485%203h2.753a.743.743%200%200%201%20.742.741a.74.74%200%200%201-.742.742H6.485a1.98%201.98%200%200%200-1.98%201.977v1.828a.75.75%200%200%201-.762.771m12.94%202.916a4.7%204.7%200%200%201-1.069%202.978a4.704%204.704%200%200%201-5.853%201.16a4.688%204.688%200%200%201-.392-8.045a4.71%204.71%200%200%201%206.96%202.109c.236.57.357%201.181.354%201.798%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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