mystery icon
mystery from Material Symbols by Google · Regular · Social · Apache-2.0 Free for personal and commercial use.
- Name
- mystery
- Set
- Material Symbols
- Style
- Regular
- Category
- Social
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- mystery-sharp
3 other variants in Material Symbols
The same icon in other sets
More social icons from Material Symbols
Use the mystery icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11 18q2.9 0 4.95-2.037T18 11q0-2.9-2.05-4.95T11 4Q8.075 4 6.038 6.05T4 11q0 2.925 2.038 4.963T11 18m0-4.5q1.05 0 1.775-.712T13.5 11q0-1.05-.725-1.775T11 8.5q-1.075 0-1.787.725T8.5 11q0 1.075.713 1.788T11 13.5m0 1.5q-2.075 0-3.687-1.112T5 11q.7-1.75 2.313-2.875T11 7q2.05 0 3.663 1.125T17 11q-.725 1.775-2.337 2.888T11 15m0-2.5q.625 0 1.063-.425T12.5 11q0-.625-.437-1.062T11 9.5q-.65 0-1.075.438T9.5 11q0 .65.425 1.075T11 12.5m9.575 9.5L16.6 18.05q-1.175.925-2.6 1.438T11 20q-1.875 0-3.512-.712t-2.85-1.925t-1.926-2.85T2 11q0-1.85.713-3.488T4.637 4.65t2.85-1.938T11 2q1.85 0 3.488.713T17.35 4.65t1.938 2.863T20 11q0 1.6-.525 3.025t-1.45 2.6L22 20.6z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsMystery(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="M11 18q2.9 0 4.95-2.037T18 11q0-2.9-2.05-4.95T11 4Q8.075 4 6.038 6.05T4 11q0 2.925 2.038 4.963T11 18m0-4.5q1.05 0 1.775-.712T13.5 11q0-1.05-.725-1.775T11 8.5q-1.075 0-1.787.725T8.5 11q0 1.075.713 1.788T11 13.5m0 1.5q-2.075 0-3.687-1.112T5 11q.7-1.75 2.313-2.875T11 7q2.05 0 3.663 1.125T17 11q-.725 1.775-2.337 2.888T11 15m0-2.5q.625 0 1.063-.425T12.5 11q0-.625-.437-1.062T11 9.5q-.65 0-1.075.438T9.5 11q0 .65.425 1.075T11 12.5m9.575 9.5L16.6 18.05q-1.175.925-2.6 1.438T11 20q-1.875 0-3.512-.712t-2.85-1.925t-1.926-2.85T2 11q0-1.85.713-3.488T4.637 4.65t2.85-1.938T11 2q1.85 0 3.488.713T17.35 4.65t1.938 2.863T20 11q0 1.6-.525 3.025t-1.45 2.6L22 20.6z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11 18q2.9 0 4.95-2.037T18 11q0-2.9-2.05-4.95T11 4Q8.075 4 6.038 6.05T4 11q0 2.925 2.038 4.963T11 18m0-4.5q1.05 0 1.775-.712T13.5 11q0-1.05-.725-1.775T11 8.5q-1.075 0-1.787.725T8.5 11q0 1.075.713 1.788T11 13.5m0 1.5q-2.075 0-3.687-1.112T5 11q.7-1.75 2.313-2.875T11 7q2.05 0 3.663 1.125T17 11q-.725 1.775-2.337 2.888T11 15m0-2.5q.625 0 1.063-.425T12.5 11q0-.625-.437-1.062T11 9.5q-.65 0-1.075.438T9.5 11q0 .65.425 1.075T11 12.5m9.575 9.5L16.6 18.05q-1.175.925-2.6 1.438T11 20q-1.875 0-3.512-.712t-2.85-1.925t-1.926-2.85T2 11q0-1.85.713-3.488T4.637 4.65t2.85-1.938T11 2q1.85 0 3.488.713T17.35 4.65t1.938 2.863T20 11q0 1.6-.525 3.025t-1.45 2.6L22 20.6z"/></svg> </template>
CSS
.icon-mystery {
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%22M11%2018q2.9%200%204.95-2.037T18%2011q0-2.9-2.05-4.95T11%204Q8.075%204%206.038%206.05T4%2011q0%202.925%202.038%204.963T11%2018m0-4.5q1.05%200%201.775-.712T13.5%2011q0-1.05-.725-1.775T11%208.5q-1.075%200-1.787.725T8.5%2011q0%201.075.713%201.788T11%2013.5m0%201.5q-2.075%200-3.687-1.112T5%2011q.7-1.75%202.313-2.875T11%207q2.05%200%203.663%201.125T17%2011q-.725%201.775-2.337%202.888T11%2015m0-2.5q.625%200%201.063-.425T12.5%2011q0-.625-.437-1.062T11%209.5q-.65%200-1.075.438T9.5%2011q0%20.65.425%201.075T11%2012.5m9.575%209.5L16.6%2018.05q-1.175.925-2.6%201.438T11%2020q-1.875%200-3.512-.712t-2.85-1.925t-1.926-2.85T2%2011q0-1.85.713-3.488T4.637%204.65t2.85-1.938T11%202q1.85%200%203.488.713T17.35%204.65t1.938%202.863T20%2011q0%201.6-.525%203.025t-1.45%202.6L22%2020.6z%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%22M11%2018q2.9%200%204.95-2.037T18%2011q0-2.9-2.05-4.95T11%204Q8.075%204%206.038%206.05T4%2011q0%202.925%202.038%204.963T11%2018m0-4.5q1.05%200%201.775-.712T13.5%2011q0-1.05-.725-1.775T11%208.5q-1.075%200-1.787.725T8.5%2011q0%201.075.713%201.788T11%2013.5m0%201.5q-2.075%200-3.687-1.112T5%2011q.7-1.75%202.313-2.875T11%207q2.05%200%203.663%201.125T17%2011q-.725%201.775-2.337%202.888T11%2015m0-2.5q.625%200%201.063-.425T12.5%2011q0-.625-.437-1.062T11%209.5q-.65%200-1.075.438T9.5%2011q0%20.65.425%201.075T11%2012.5m9.575%209.5L16.6%2018.05q-1.175.925-2.6%201.438T11%2020q-1.875%200-3.512-.712t-2.85-1.925t-1.926-2.85T2%2011q0-1.85.713-3.488T4.637%204.65t2.85-1.938T11%202q1.85%200%203.488.713T17.35%204.65t1.938%202.863T20%2011q0%201.6-.525%203.025t-1.45%202.6L22%2020.6z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/mystery.svg?color=%231a73e8&size=48
