magnet icon
magnet from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- magnet
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
magnetBootstrap IconsmagnetBoxIcons v2magnetBoxIcons v2 SolidmagnetCodiconsmagnetElement PlusmagnetFont Awesome 6 SolidmagnetFont Awesome SolidmagnetFluent EmojimagnetFluent Emoji FlatmagnetFluent Emoji High Contrastmagnetcss.ggmagnetHuge IconsmagnetIconParkmagnetIconPark OutlinemagnetIconPark SolidmagnetIconPark TwoTonemagnetIconoirmagnetJam IconsmagnetLine AwesomemagnetLucidemagnetMaterial Design Iconsmagnet-fillMingCute IconmagnetMyna UI IconsmagnetNoto Emoji
Use the magnet icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M191.98 463.79v-48m-101.82 5.82l33.94-33.94m-76.12-67.88h48"/><path fill="currentColor" d="m267.56 312.32l-31.11 31.11a16 16 0 0 0 0 22.63l45.26 45.25a16 16 0 0 0 22.62 0l31.12-31.11a4 4 0 0 0 0-5.66l-62.23-62.22a4 4 0 0 0-5.66 0M131.8 176.55l-31.11 31.12a16 16 0 0 0 0 22.62l45.25 45.26a16 16 0 0 0 22.63 0l31.11-31.11a4 4 0 0 0 0-5.66l-62.22-62.23a4 4 0 0 0-5.66 0m297.05-93.27a144 144 0 0 0-203.71-.06l-65.06 65.05a4 4 0 0 0 0 5.66l62.23 62.22a4 4 0 0 0 5.66 0l65-65.05a48 48 0 0 1 68.46.59c18.3 18.92 17.47 49.24-1.14 67.85L295.85 284a4 4 0 0 0 0 5.66l62.22 62.23a4 4 0 0 0 5.66 0l64.08-64.08c56.37-56.34 57.37-148.13 1.04-204.53"/></svg>
React
import type { SVGProps } from "react";
export function IonMagnet(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="32" d="M191.98 463.79v-48m-101.82 5.82l33.94-33.94m-76.12-67.88h48"/><path fill="currentColor" d="m267.56 312.32l-31.11 31.11a16 16 0 0 0 0 22.63l45.26 45.25a16 16 0 0 0 22.62 0l31.12-31.11a4 4 0 0 0 0-5.66l-62.23-62.22a4 4 0 0 0-5.66 0M131.8 176.55l-31.11 31.12a16 16 0 0 0 0 22.62l45.25 45.26a16 16 0 0 0 22.63 0l31.11-31.11a4 4 0 0 0 0-5.66l-62.22-62.23a4 4 0 0 0-5.66 0m297.05-93.27a144 144 0 0 0-203.71-.06l-65.06 65.05a4 4 0 0 0 0 5.66l62.23 62.22a4 4 0 0 0 5.66 0l65-65.05a48 48 0 0 1 68.46.59c18.3 18.92 17.47 49.24-1.14 67.85L295.85 284a4 4 0 0 0 0 5.66l62.22 62.23a4 4 0 0 0 5.66 0l64.08-64.08c56.37-56.34 57.37-148.13 1.04-204.53"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M191.98 463.79v-48m-101.82 5.82l33.94-33.94m-76.12-67.88h48"/><path fill="currentColor" d="m267.56 312.32l-31.11 31.11a16 16 0 0 0 0 22.63l45.26 45.25a16 16 0 0 0 22.62 0l31.12-31.11a4 4 0 0 0 0-5.66l-62.23-62.22a4 4 0 0 0-5.66 0M131.8 176.55l-31.11 31.12a16 16 0 0 0 0 22.62l45.25 45.26a16 16 0 0 0 22.63 0l31.11-31.11a4 4 0 0 0 0-5.66l-62.22-62.23a4 4 0 0 0-5.66 0m297.05-93.27a144 144 0 0 0-203.71-.06l-65.06 65.05a4 4 0 0 0 0 5.66l62.23 62.22a4 4 0 0 0 5.66 0l65-65.05a48 48 0 0 1 68.46.59c18.3 18.92 17.47 49.24-1.14 67.85L295.85 284a4 4 0 0 0 0 5.66l62.22 62.23a4 4 0 0 0 5.66 0l64.08-64.08c56.37-56.34 57.37-148.13 1.04-204.53"/></svg> </template>
CSS
.icon-magnet {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M191.98%20463.79v-48m-101.82%205.82l33.94-33.94m-76.12-67.88h48%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m267.56%20312.32l-31.11%2031.11a16%2016%200%200%200%200%2022.63l45.26%2045.25a16%2016%200%200%200%2022.62%200l31.12-31.11a4%204%200%200%200%200-5.66l-62.23-62.22a4%204%200%200%200-5.66%200M131.8%20176.55l-31.11%2031.12a16%2016%200%200%200%200%2022.62l45.25%2045.26a16%2016%200%200%200%2022.63%200l31.11-31.11a4%204%200%200%200%200-5.66l-62.22-62.23a4%204%200%200%200-5.66%200m297.05-93.27a144%20144%200%200%200-203.71-.06l-65.06%2065.05a4%204%200%200%200%200%205.66l62.23%2062.22a4%204%200%200%200%205.66%200l65-65.05a48%2048%200%200%201%2068.46.59c18.3%2018.92%2017.47%2049.24-1.14%2067.85L295.85%20284a4%204%200%200%200%200%205.66l62.22%2062.23a4%204%200%200%200%205.66%200l64.08-64.08c56.37-56.34%2057.37-148.13%201.04-204.53%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M191.98%20463.79v-48m-101.82%205.82l33.94-33.94m-76.12-67.88h48%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m267.56%20312.32l-31.11%2031.11a16%2016%200%200%200%200%2022.63l45.26%2045.25a16%2016%200%200%200%2022.62%200l31.12-31.11a4%204%200%200%200%200-5.66l-62.23-62.22a4%204%200%200%200-5.66%200M131.8%20176.55l-31.11%2031.12a16%2016%200%200%200%200%2022.62l45.25%2045.26a16%2016%200%200%200%2022.63%200l31.11-31.11a4%204%200%200%200%200-5.66l-62.22-62.23a4%204%200%200%200-5.66%200m297.05-93.27a144%20144%200%200%200-203.71-.06l-65.06%2065.05a4%204%200%200%200%200%205.66l62.23%2062.22a4%204%200%200%200%205.66%200l65-65.05a48%2048%200%200%201%2068.46.59c18.3%2018.92%2017.47%2049.24-1.14%2067.85L295.85%20284a4%204%200%200%200%200%205.66l62.22%2062.23a4%204%200%200%200%205.66%200l64.08-64.08c56.37-56.34%2057.37-148.13%201.04-204.53%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/magnet.svg?color=%231a73e8&size=48
