instagram circle icon
instagram-circle from Mage Icons by MageIcons · Outline · Apache-2.0 Free for personal and commercial use.
- Name
- instagram-circle
- Set
- Mage Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- Apache 2.0
Related icons in Mage Icons
Use the instagram circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13.61 12.243a1.6 1.6 0 1 1-1.56-1.63a1.62 1.62 0 0 1 1.56 1.63"/><path fill="currentColor" d="M14.763 7.233H9.338a2.024 2.024 0 0 0-2.024 2.024v5.547a2.024 2.024 0 0 0 2.024 2.024h5.425a2.024 2.024 0 0 0 2.024-2.024V9.267a2.026 2.026 0 0 0-2.024-2.034m-2.713 7.723a2.703 2.703 0 1 1 2.642-2.703a2.67 2.67 0 0 1-2.642 2.703m2.936-5.405a.496.496 0 0 1-.496-.506a.506.506 0 1 1 1.012 0a.496.496 0 0 1-.557.506z"/><path fill="currentColor" d="M12.05 2a10 10 0 1 0-.1 20a10 10 0 0 0 .1-20m6.073 12.702a3.39 3.39 0 0 1-3.41 3.411H9.389a3.39 3.39 0 0 1-3.411-3.41V9.378a3.39 3.39 0 0 1 3.41-3.411h5.325a3.39 3.39 0 0 1 3.41 3.41z"/></svg>
React
import type { SVGProps } from "react";
export function MageInstagramCircle(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="M13.61 12.243a1.6 1.6 0 1 1-1.56-1.63a1.62 1.62 0 0 1 1.56 1.63"/><path fill="currentColor" d="M14.763 7.233H9.338a2.024 2.024 0 0 0-2.024 2.024v5.547a2.024 2.024 0 0 0 2.024 2.024h5.425a2.024 2.024 0 0 0 2.024-2.024V9.267a2.026 2.026 0 0 0-2.024-2.034m-2.713 7.723a2.703 2.703 0 1 1 2.642-2.703a2.67 2.67 0 0 1-2.642 2.703m2.936-5.405a.496.496 0 0 1-.496-.506a.506.506 0 1 1 1.012 0a.496.496 0 0 1-.557.506z"/><path fill="currentColor" d="M12.05 2a10 10 0 1 0-.1 20a10 10 0 0 0 .1-20m6.073 12.702a3.39 3.39 0 0 1-3.41 3.411H9.389a3.39 3.39 0 0 1-3.411-3.41V9.378a3.39 3.39 0 0 1 3.41-3.411h5.325a3.39 3.39 0 0 1 3.41 3.41z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13.61 12.243a1.6 1.6 0 1 1-1.56-1.63a1.62 1.62 0 0 1 1.56 1.63"/><path fill="currentColor" d="M14.763 7.233H9.338a2.024 2.024 0 0 0-2.024 2.024v5.547a2.024 2.024 0 0 0 2.024 2.024h5.425a2.024 2.024 0 0 0 2.024-2.024V9.267a2.026 2.026 0 0 0-2.024-2.034m-2.713 7.723a2.703 2.703 0 1 1 2.642-2.703a2.67 2.67 0 0 1-2.642 2.703m2.936-5.405a.496.496 0 0 1-.496-.506a.506.506 0 1 1 1.012 0a.496.496 0 0 1-.557.506z"/><path fill="currentColor" d="M12.05 2a10 10 0 1 0-.1 20a10 10 0 0 0 .1-20m6.073 12.702a3.39 3.39 0 0 1-3.41 3.411H9.389a3.39 3.39 0 0 1-3.411-3.41V9.378a3.39 3.39 0 0 1 3.41-3.411h5.325a3.39 3.39 0 0 1 3.41 3.41z"/></svg> </template>
CSS
.icon-instagram-circle {
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%22M13.61%2012.243a1.6%201.6%200%201%201-1.56-1.63a1.62%201.62%200%200%201%201.56%201.63%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14.763%207.233H9.338a2.024%202.024%200%200%200-2.024%202.024v5.547a2.024%202.024%200%200%200%202.024%202.024h5.425a2.024%202.024%200%200%200%202.024-2.024V9.267a2.026%202.026%200%200%200-2.024-2.034m-2.713%207.723a2.703%202.703%200%201%201%202.642-2.703a2.67%202.67%200%200%201-2.642%202.703m2.936-5.405a.496.496%200%200%201-.496-.506a.506.506%200%201%201%201.012%200a.496.496%200%200%201-.557.506z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.05%202a10%2010%200%201%200-.1%2020a10%2010%200%200%200%20.1-20m6.073%2012.702a3.39%203.39%200%200%201-3.41%203.411H9.389a3.39%203.39%200%200%201-3.411-3.41V9.378a3.39%203.39%200%200%201%203.41-3.411h5.325a3.39%203.39%200%200%201%203.41%203.41z%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%22M13.61%2012.243a1.6%201.6%200%201%201-1.56-1.63a1.62%201.62%200%200%201%201.56%201.63%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14.763%207.233H9.338a2.024%202.024%200%200%200-2.024%202.024v5.547a2.024%202.024%200%200%200%202.024%202.024h5.425a2.024%202.024%200%200%200%202.024-2.024V9.267a2.026%202.026%200%200%200-2.024-2.034m-2.713%207.723a2.703%202.703%200%201%201%202.642-2.703a2.67%202.67%200%200%201-2.642%202.703m2.936-5.405a.496.496%200%200%201-.496-.506a.506.506%200%201%201%201.012%200a.496.496%200%200%201-.557.506z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.05%202a10%2010%200%201%200-.1%2020a10%2010%200%200%200%20.1-20m6.073%2012.702a3.39%203.39%200%200%201-3.41%203.411H9.389a3.39%203.39%200%200%201-3.411-3.41V9.378a3.39%203.39%200%200%201%203.41-3.411h5.325a3.39%203.39%200%200%201%203.41%203.41z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/instagram-circle.svg?color=%231a73e8&size=48
