magic icon

magic from Font Awesome Solid by Dave Gandy · Solid · Design · CC-BY-4.0 Attribution required.

Name: magic
Set: Font Awesome Solid
Style: Solid
Category: Design
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

magicBootstrap Icons magicIconPark magicIconPark Outline magicJam Icons magicLine Awesome magic-fillRemix Icon magicSimple Icons

More design icons from Font Awesome Solid

Use the magic icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m462.5 76.2l-88.2 88.2l101.3 101.3l88.2-88.2c7.8-7.9 12.2-18.5 12.2-29.5s-4.4-21.6-12.2-29.5l-42.3-42.3C513.6 68.4 503 64 492 64s-21.6 4.4-29.5 12.2M340.4 198.3L76.2 462.5C68.4 470.4 64 481 64 492s4.4 21.6 12.2 29.5l42.3 42.3c7.9 7.8 18.5 12.2 29.5 12.2s21.6-4.4 29.5-12.2l264.2-264.2z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidMagic(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m462.5 76.2l-88.2 88.2l101.3 101.3l88.2-88.2c7.8-7.9 12.2-18.5 12.2-29.5s-4.4-21.6-12.2-29.5l-42.3-42.3C513.6 68.4 503 64 492 64s-21.6 4.4-29.5 12.2M340.4 198.3L76.2 462.5C68.4 470.4 64 481 64 492s4.4 21.6 12.2 29.5l42.3 42.3c7.9 7.8 18.5 12.2 29.5 12.2s21.6-4.4 29.5-12.2l264.2-264.2z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="m462.5 76.2l-88.2 88.2l101.3 101.3l88.2-88.2c7.8-7.9 12.2-18.5 12.2-29.5s-4.4-21.6-12.2-29.5l-42.3-42.3C513.6 68.4 503 64 492 64s-21.6 4.4-29.5 12.2M340.4 198.3L76.2 462.5C68.4 470.4 64 481 64 492s4.4 21.6 12.2 29.5l42.3 42.3c7.9 7.8 18.5 12.2 29.5 12.2s21.6-4.4 29.5-12.2l264.2-264.2z"/></svg>
</template>

CSS

.icon-magic {
  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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m462.5%2076.2l-88.2%2088.2l101.3%20101.3l88.2-88.2c7.8-7.9%2012.2-18.5%2012.2-29.5s-4.4-21.6-12.2-29.5l-42.3-42.3C513.6%2068.4%20503%2064%20492%2064s-21.6%204.4-29.5%2012.2M340.4%20198.3L76.2%20462.5C68.4%20470.4%2064%20481%2064%20492s4.4%2021.6%2012.2%2029.5l42.3%2042.3c7.9%207.8%2018.5%2012.2%2029.5%2012.2s21.6-4.4%2029.5-12.2l264.2-264.2z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m462.5%2076.2l-88.2%2088.2l101.3%20101.3l88.2-88.2c7.8-7.9%2012.2-18.5%2012.2-29.5s-4.4-21.6-12.2-29.5l-42.3-42.3C513.6%2068.4%20503%2064%20492%2064s-21.6%204.4-29.5%2012.2M340.4%20198.3L76.2%20462.5C68.4%20470.4%2064%20481%2064%20492s4.4%2021.6%2012.2%2029.5l42.3%2042.3c7.9%207.8%2018.5%2012.2%2029.5%2012.2s21.6-4.4%2029.5-12.2l264.2-264.2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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