magnet icon
magnet-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.
- Name
- magnet-outline
- Set
- IonIcons
- Style
- Outline
- 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="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M421.83 293.82A144 144 0 0 0 218.18 90.17"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M353.94 225.94a48 48 0 0 0-67.88-67.88"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M192 464v-48m-101.82 5.82l33.94-33.94M48 320h48"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M286.06 158.06L172.92 271.19a32 32 0 0 1-45.25 0L105 248.57a32 32 0 0 1 0-45.26L218.18 90.17m203.65 203.65L308.69 407a32 32 0 0 1-45.26 0l-22.62-22.63a32 32 0 0 1 0-45.26l113.13-113.17M139.6 169.98l67.88 67.89m67.88 67.88l67.89 67.88"/></svg>
React
import type { SVGProps } from "react";
export function IonMagnetOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeMiterlimit="10" strokeWidth="32" d="M421.83 293.82A144 144 0 0 0 218.18 90.17"/><path fill="none" stroke="currentColor" strokeMiterlimit="10" strokeWidth="32" d="M353.94 225.94a48 48 0 0 0-67.88-67.88"/><path fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="32" d="M192 464v-48m-101.82 5.82l33.94-33.94M48 320h48"/><path fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="32" d="M286.06 158.06L172.92 271.19a32 32 0 0 1-45.25 0L105 248.57a32 32 0 0 1 0-45.26L218.18 90.17m203.65 203.65L308.69 407a32 32 0 0 1-45.26 0l-22.62-22.63a32 32 0 0 1 0-45.26l113.13-113.17M139.6 169.98l67.88 67.89m67.88 67.88l67.89 67.88"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M421.83 293.82A144 144 0 0 0 218.18 90.17"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M353.94 225.94a48 48 0 0 0-67.88-67.88"/><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M192 464v-48m-101.82 5.82l33.94-33.94M48 320h48"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M286.06 158.06L172.92 271.19a32 32 0 0 1-45.25 0L105 248.57a32 32 0 0 1 0-45.26L218.18 90.17m203.65 203.65L308.69 407a32 32 0 0 1-45.26 0l-22.62-22.63a32 32 0 0 1 0-45.26l113.13-113.17M139.6 169.98l67.88 67.89m67.88 67.88l67.89 67.88"/></svg> </template>
CSS
.icon-magnet-outline {
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%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M421.83%20293.82A144%20144%200%200%200%20218.18%2090.17%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M353.94%20225.94a48%2048%200%200%200-67.88-67.88%22%2F%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%22M192%20464v-48m-101.82%205.82l33.94-33.94M48%20320h48%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M286.06%20158.06L172.92%20271.19a32%2032%200%200%201-45.25%200L105%20248.57a32%2032%200%200%201%200-45.26L218.18%2090.17m203.65%20203.65L308.69%20407a32%2032%200%200%201-45.26%200l-22.62-22.63a32%2032%200%200%201%200-45.26l113.13-113.17M139.6%20169.98l67.88%2067.89m67.88%2067.88l67.89%2067.88%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%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M421.83%20293.82A144%20144%200%200%200%20218.18%2090.17%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M353.94%20225.94a48%2048%200%200%200-67.88-67.88%22%2F%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%22M192%20464v-48m-101.82%205.82l33.94-33.94M48%20320h48%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M286.06%20158.06L172.92%20271.19a32%2032%200%200%201-45.25%200L105%20248.57a32%2032%200%200%201%200-45.26L218.18%2090.17m203.65%20203.65L308.69%20407a32%2032%200%200%201-45.26%200l-22.62-22.63a32%2032%200%200%201%200-45.26l113.13-113.17M139.6%20169.98l67.88%2067.89m67.88%2067.88l67.89%2067.88%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/magnet-outline.svg?color=%231a73e8&size=48
