notion icon
notion from Mage Icons by MageIcons · Outline · Apache-2.0 Free for personal and commercial use.
- Name
- notion
- Set
- Mage Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- Apache 2.0
The same icon in other sets
Use the notion icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.432 12.904v5.994c-.017.697-.355 1.082-1.053 1.14c-.801.066-1.606.108-2.41.156q-2.43.15-4.861.294c-1.435.085-2.87.16-4.303.257c-.634.041-1.133-.159-1.484-.703c-.104-.161-.237-.306-.355-.46c-.6-.774-1.195-1.55-1.798-2.32a2.7 2.7 0 0 1-.607-1.763c.02-3.41.008-6.818.01-10.227q0-.193.03-.384c.092-.5.402-.81.908-.858c.828-.078 1.669-.132 2.504-.195l3.99-.294c1.278-.093 2.556-.182 3.834-.283a2.58 2.58 0 0 1 1.786.53c1.126.817 2.27 1.607 3.412 2.404a.88.88 0 0 1 .403.797c-.011 1.971-.006 3.943-.006 5.915m-1.162.077V7.877c0-.492-.173-.662-.65-.634l-4.15.236l-5.09.298q-.897.051-1.794.11c-.317.022-.461.162-.508.473q-.018.135-.015.27v9.86c0 .767.204.959.974.914s1.539-.095 2.317-.14l8.239-.473c.442-.025.643-.22.678-.659c.006-.077 0-.154 0-.236zm-1.247-6.916l.027-.051a1.6 1.6 0 0 0-.2-.205c-.546-.399-1.098-.79-1.643-1.183c-.357-.273-.8-.41-1.249-.385c-.894.054-1.786.125-2.68.19l-5.744.417c-.412.03-.829.062-1.231.11a.3.3 0 0 0-.21.161c-.017.049.064.159.127.21c.45.363.908.72 1.362 1.078c.245.204.558.31.876.297c.155-.007.31 0 .464-.014l4.168-.256l5.538-.326q.198-.023.395-.043"/><path fill="currentColor" d="M15.527 14.688v-4.66c-.252-.03-.493-.065-.736-.083c-.133-.01-.164-.07-.15-.187a.56.56 0 0 1 .492-.5c.803-.06 1.606-.101 2.405-.149c.119.397 0 .592-.38.667c-.419.087-.419.087-.419.512v6.845c0 .159-.042.256-.192.303a8 8 0 0 1-.807.255c-.439.092-.828-.03-1.089-.409a60 60 0 0 1-1.065-1.588c-.804-1.244-1.598-2.493-2.397-3.74c-.016-.026-.038-.051-.083-.113c-.01.086-.019.135-.019.186v4.66c0 .137.044.193.176.218c.296.058.591.129.88.194a.6.6 0 0 1-.54.576a7 7 0 0 1-.731.06c-.592.036-1.184.064-1.775.106c-.173.012-.208-.06-.178-.201a.41.41 0 0 1 .315-.355c.186-.045.37-.104.554-.156v-6.69l-.829-.074a.592.592 0 0 1 .533-.772c.725-.058 1.455-.08 2.178-.162c.309-.034.453.08.608.319c1.023 1.576 2.06 3.146 3.093 4.717z"/></svg>
React
import type { SVGProps } from "react";
export function MageNotion(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="M20.432 12.904v5.994c-.017.697-.355 1.082-1.053 1.14c-.801.066-1.606.108-2.41.156q-2.43.15-4.861.294c-1.435.085-2.87.16-4.303.257c-.634.041-1.133-.159-1.484-.703c-.104-.161-.237-.306-.355-.46c-.6-.774-1.195-1.55-1.798-2.32a2.7 2.7 0 0 1-.607-1.763c.02-3.41.008-6.818.01-10.227q0-.193.03-.384c.092-.5.402-.81.908-.858c.828-.078 1.669-.132 2.504-.195l3.99-.294c1.278-.093 2.556-.182 3.834-.283a2.58 2.58 0 0 1 1.786.53c1.126.817 2.27 1.607 3.412 2.404a.88.88 0 0 1 .403.797c-.011 1.971-.006 3.943-.006 5.915m-1.162.077V7.877c0-.492-.173-.662-.65-.634l-4.15.236l-5.09.298q-.897.051-1.794.11c-.317.022-.461.162-.508.473q-.018.135-.015.27v9.86c0 .767.204.959.974.914s1.539-.095 2.317-.14l8.239-.473c.442-.025.643-.22.678-.659c.006-.077 0-.154 0-.236zm-1.247-6.916l.027-.051a1.6 1.6 0 0 0-.2-.205c-.546-.399-1.098-.79-1.643-1.183c-.357-.273-.8-.41-1.249-.385c-.894.054-1.786.125-2.68.19l-5.744.417c-.412.03-.829.062-1.231.11a.3.3 0 0 0-.21.161c-.017.049.064.159.127.21c.45.363.908.72 1.362 1.078c.245.204.558.31.876.297c.155-.007.31 0 .464-.014l4.168-.256l5.538-.326q.198-.023.395-.043"/><path fill="currentColor" d="M15.527 14.688v-4.66c-.252-.03-.493-.065-.736-.083c-.133-.01-.164-.07-.15-.187a.56.56 0 0 1 .492-.5c.803-.06 1.606-.101 2.405-.149c.119.397 0 .592-.38.667c-.419.087-.419.087-.419.512v6.845c0 .159-.042.256-.192.303a8 8 0 0 1-.807.255c-.439.092-.828-.03-1.089-.409a60 60 0 0 1-1.065-1.588c-.804-1.244-1.598-2.493-2.397-3.74c-.016-.026-.038-.051-.083-.113c-.01.086-.019.135-.019.186v4.66c0 .137.044.193.176.218c.296.058.591.129.88.194a.6.6 0 0 1-.54.576a7 7 0 0 1-.731.06c-.592.036-1.184.064-1.775.106c-.173.012-.208-.06-.178-.201a.41.41 0 0 1 .315-.355c.186-.045.37-.104.554-.156v-6.69l-.829-.074a.592.592 0 0 1 .533-.772c.725-.058 1.455-.08 2.178-.162c.309-.034.453.08.608.319c1.023 1.576 2.06 3.146 3.093 4.717z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.432 12.904v5.994c-.017.697-.355 1.082-1.053 1.14c-.801.066-1.606.108-2.41.156q-2.43.15-4.861.294c-1.435.085-2.87.16-4.303.257c-.634.041-1.133-.159-1.484-.703c-.104-.161-.237-.306-.355-.46c-.6-.774-1.195-1.55-1.798-2.32a2.7 2.7 0 0 1-.607-1.763c.02-3.41.008-6.818.01-10.227q0-.193.03-.384c.092-.5.402-.81.908-.858c.828-.078 1.669-.132 2.504-.195l3.99-.294c1.278-.093 2.556-.182 3.834-.283a2.58 2.58 0 0 1 1.786.53c1.126.817 2.27 1.607 3.412 2.404a.88.88 0 0 1 .403.797c-.011 1.971-.006 3.943-.006 5.915m-1.162.077V7.877c0-.492-.173-.662-.65-.634l-4.15.236l-5.09.298q-.897.051-1.794.11c-.317.022-.461.162-.508.473q-.018.135-.015.27v9.86c0 .767.204.959.974.914s1.539-.095 2.317-.14l8.239-.473c.442-.025.643-.22.678-.659c.006-.077 0-.154 0-.236zm-1.247-6.916l.027-.051a1.6 1.6 0 0 0-.2-.205c-.546-.399-1.098-.79-1.643-1.183c-.357-.273-.8-.41-1.249-.385c-.894.054-1.786.125-2.68.19l-5.744.417c-.412.03-.829.062-1.231.11a.3.3 0 0 0-.21.161c-.017.049.064.159.127.21c.45.363.908.72 1.362 1.078c.245.204.558.31.876.297c.155-.007.31 0 .464-.014l4.168-.256l5.538-.326q.198-.023.395-.043"/><path fill="currentColor" d="M15.527 14.688v-4.66c-.252-.03-.493-.065-.736-.083c-.133-.01-.164-.07-.15-.187a.56.56 0 0 1 .492-.5c.803-.06 1.606-.101 2.405-.149c.119.397 0 .592-.38.667c-.419.087-.419.087-.419.512v6.845c0 .159-.042.256-.192.303a8 8 0 0 1-.807.255c-.439.092-.828-.03-1.089-.409a60 60 0 0 1-1.065-1.588c-.804-1.244-1.598-2.493-2.397-3.74c-.016-.026-.038-.051-.083-.113c-.01.086-.019.135-.019.186v4.66c0 .137.044.193.176.218c.296.058.591.129.88.194a.6.6 0 0 1-.54.576a7 7 0 0 1-.731.06c-.592.036-1.184.064-1.775.106c-.173.012-.208-.06-.178-.201a.41.41 0 0 1 .315-.355c.186-.045.37-.104.554-.156v-6.69l-.829-.074a.592.592 0 0 1 .533-.772c.725-.058 1.455-.08 2.178-.162c.309-.034.453.08.608.319c1.023 1.576 2.06 3.146 3.093 4.717z"/></svg> </template>
CSS
.icon-notion {
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%22M20.432%2012.904v5.994c-.017.697-.355%201.082-1.053%201.14c-.801.066-1.606.108-2.41.156q-2.43.15-4.861.294c-1.435.085-2.87.16-4.303.257c-.634.041-1.133-.159-1.484-.703c-.104-.161-.237-.306-.355-.46c-.6-.774-1.195-1.55-1.798-2.32a2.7%202.7%200%200%201-.607-1.763c.02-3.41.008-6.818.01-10.227q0-.193.03-.384c.092-.5.402-.81.908-.858c.828-.078%201.669-.132%202.504-.195l3.99-.294c1.278-.093%202.556-.182%203.834-.283a2.58%202.58%200%200%201%201.786.53c1.126.817%202.27%201.607%203.412%202.404a.88.88%200%200%201%20.403.797c-.011%201.971-.006%203.943-.006%205.915m-1.162.077V7.877c0-.492-.173-.662-.65-.634l-4.15.236l-5.09.298q-.897.051-1.794.11c-.317.022-.461.162-.508.473q-.018.135-.015.27v9.86c0%20.767.204.959.974.914s1.539-.095%202.317-.14l8.239-.473c.442-.025.643-.22.678-.659c.006-.077%200-.154%200-.236zm-1.247-6.916l.027-.051a1.6%201.6%200%200%200-.2-.205c-.546-.399-1.098-.79-1.643-1.183c-.357-.273-.8-.41-1.249-.385c-.894.054-1.786.125-2.68.19l-5.744.417c-.412.03-.829.062-1.231.11a.3.3%200%200%200-.21.161c-.017.049.064.159.127.21c.45.363.908.72%201.362%201.078c.245.204.558.31.876.297c.155-.007.31%200%20.464-.014l4.168-.256l5.538-.326q.198-.023.395-.043%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.527%2014.688v-4.66c-.252-.03-.493-.065-.736-.083c-.133-.01-.164-.07-.15-.187a.56.56%200%200%201%20.492-.5c.803-.06%201.606-.101%202.405-.149c.119.397%200%20.592-.38.667c-.419.087-.419.087-.419.512v6.845c0%20.159-.042.256-.192.303a8%208%200%200%201-.807.255c-.439.092-.828-.03-1.089-.409a60%2060%200%200%201-1.065-1.588c-.804-1.244-1.598-2.493-2.397-3.74c-.016-.026-.038-.051-.083-.113c-.01.086-.019.135-.019.186v4.66c0%20.137.044.193.176.218c.296.058.591.129.88.194a.6.6%200%200%201-.54.576a7%207%200%200%201-.731.06c-.592.036-1.184.064-1.775.106c-.173.012-.208-.06-.178-.201a.41.41%200%200%201%20.315-.355c.186-.045.37-.104.554-.156v-6.69l-.829-.074a.592.592%200%200%201%20.533-.772c.725-.058%201.455-.08%202.178-.162c.309-.034.453.08.608.319c1.023%201.576%202.06%203.146%203.093%204.717z%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%22M20.432%2012.904v5.994c-.017.697-.355%201.082-1.053%201.14c-.801.066-1.606.108-2.41.156q-2.43.15-4.861.294c-1.435.085-2.87.16-4.303.257c-.634.041-1.133-.159-1.484-.703c-.104-.161-.237-.306-.355-.46c-.6-.774-1.195-1.55-1.798-2.32a2.7%202.7%200%200%201-.607-1.763c.02-3.41.008-6.818.01-10.227q0-.193.03-.384c.092-.5.402-.81.908-.858c.828-.078%201.669-.132%202.504-.195l3.99-.294c1.278-.093%202.556-.182%203.834-.283a2.58%202.58%200%200%201%201.786.53c1.126.817%202.27%201.607%203.412%202.404a.88.88%200%200%201%20.403.797c-.011%201.971-.006%203.943-.006%205.915m-1.162.077V7.877c0-.492-.173-.662-.65-.634l-4.15.236l-5.09.298q-.897.051-1.794.11c-.317.022-.461.162-.508.473q-.018.135-.015.27v9.86c0%20.767.204.959.974.914s1.539-.095%202.317-.14l8.239-.473c.442-.025.643-.22.678-.659c.006-.077%200-.154%200-.236zm-1.247-6.916l.027-.051a1.6%201.6%200%200%200-.2-.205c-.546-.399-1.098-.79-1.643-1.183c-.357-.273-.8-.41-1.249-.385c-.894.054-1.786.125-2.68.19l-5.744.417c-.412.03-.829.062-1.231.11a.3.3%200%200%200-.21.161c-.017.049.064.159.127.21c.45.363.908.72%201.362%201.078c.245.204.558.31.876.297c.155-.007.31%200%20.464-.014l4.168-.256l5.538-.326q.198-.023.395-.043%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.527%2014.688v-4.66c-.252-.03-.493-.065-.736-.083c-.133-.01-.164-.07-.15-.187a.56.56%200%200%201%20.492-.5c.803-.06%201.606-.101%202.405-.149c.119.397%200%20.592-.38.667c-.419.087-.419.087-.419.512v6.845c0%20.159-.042.256-.192.303a8%208%200%200%201-.807.255c-.439.092-.828-.03-1.089-.409a60%2060%200%200%201-1.065-1.588c-.804-1.244-1.598-2.493-2.397-3.74c-.016-.026-.038-.051-.083-.113c-.01.086-.019.135-.019.186v4.66c0%20.137.044.193.176.218c.296.058.591.129.88.194a.6.6%200%200%201-.54.576a7%207%200%200%201-.731.06c-.592.036-1.184.064-1.775.106c-.173.012-.208-.06-.178-.201a.41.41%200%200%201%20.315-.355c.186-.045.37-.104.554-.156v-6.69l-.829-.074a.592.592%200%200%201%20.533-.772c.725-.058%201.455-.08%202.178-.162c.309-.034.453.08.608.319c1.023%201.576%202.06%203.146%203.093%204.717z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/notion.svg?color=%231a73e8&size=48
