notion logo
notion from LobeHub AI Icons by LobeHub · Mono · MIT Free for personal and commercial use.
- Name
- notion
- Set
- LobeHub AI Icons
- Style
- Mono
- Viewbox
- 24×24
- License
- MIT
1 other variant in LobeHub AI Icons
The same logo in other sets
Use the notion logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.257.055l-13.31.98C.874 1.128.5 1.83.5 2.667v14.559c0 .654.233 1.213.794 1.96l3.129 4.06c.513.653.98.794 1.962.745l15.457-.932c1.307-.093 1.681-.7 1.681-1.727V4.954c0-.53-.21-.684-.829-1.135l-.106-.078L18.34.755c-1.027-.746-1.45-.84-3.083-.7zm-8.521 4.63c-1.263.086-1.549.105-2.266-.477L2.647 2.76c-.186-.187-.092-.42.375-.466l12.796-.933c1.074-.094 1.634.28 2.054.606l2.195 1.587c.093.047.326.326.047.326l-13.216.794-.162.01zM5.263 21.193V7.287c0-.606.187-.886.748-.933l15.176-.886c.515-.047.748.28.748.886v13.81c0 .609-.093 1.122-.934 1.168l-14.523.84c-.842.047-1.215-.232-1.215-.98zm14.338-13.16c.093.422 0 .842-.422.89l-.699.139v10.264c-.608.327-1.168.513-1.635.513-.747 0-.934-.232-1.495-.932l-4.576-7.185v6.952l1.448.327s0 .84-1.169.84l-3.221.186c-.094-.187 0-.654.327-.747l.84-.232V9.853L7.832 9.76c-.093-.42.14-1.026.794-1.073l3.456-.232 4.763 7.279v-6.44l-1.214-.14c-.094-.513.28-.887.747-.933l3.223-.187z" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function LobehubNotion(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" fillRule="evenodd" d="M15.257.055l-13.31.98C.874 1.128.5 1.83.5 2.667v14.559c0 .654.233 1.213.794 1.96l3.129 4.06c.513.653.98.794 1.962.745l15.457-.932c1.307-.093 1.681-.7 1.681-1.727V4.954c0-.53-.21-.684-.829-1.135l-.106-.078L18.34.755c-1.027-.746-1.45-.84-3.083-.7zm-8.521 4.63c-1.263.086-1.549.105-2.266-.477L2.647 2.76c-.186-.187-.092-.42.375-.466l12.796-.933c1.074-.094 1.634.28 2.054.606l2.195 1.587c.093.047.326.326.047.326l-13.216.794-.162.01zM5.263 21.193V7.287c0-.606.187-.886.748-.933l15.176-.886c.515-.047.748.28.748.886v13.81c0 .609-.093 1.122-.934 1.168l-14.523.84c-.842.047-1.215-.232-1.215-.98zm14.338-13.16c.093.422 0 .842-.422.89l-.699.139v10.264c-.608.327-1.168.513-1.635.513-.747 0-.934-.232-1.495-.932l-4.576-7.185v6.952l1.448.327s0 .84-1.169.84l-3.221.186c-.094-.187 0-.654.327-.747l.84-.232V9.853L7.832 9.76c-.093-.42.14-1.026.794-1.073l3.456-.232 4.763 7.279v-6.44l-1.214-.14c-.094-.513.28-.887.747-.933l3.223-.187z" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.257.055l-13.31.98C.874 1.128.5 1.83.5 2.667v14.559c0 .654.233 1.213.794 1.96l3.129 4.06c.513.653.98.794 1.962.745l15.457-.932c1.307-.093 1.681-.7 1.681-1.727V4.954c0-.53-.21-.684-.829-1.135l-.106-.078L18.34.755c-1.027-.746-1.45-.84-3.083-.7zm-8.521 4.63c-1.263.086-1.549.105-2.266-.477L2.647 2.76c-.186-.187-.092-.42.375-.466l12.796-.933c1.074-.094 1.634.28 2.054.606l2.195 1.587c.093.047.326.326.047.326l-13.216.794-.162.01zM5.263 21.193V7.287c0-.606.187-.886.748-.933l15.176-.886c.515-.047.748.28.748.886v13.81c0 .609-.093 1.122-.934 1.168l-14.523.84c-.842.047-1.215-.232-1.215-.98zm14.338-13.16c.093.422 0 .842-.422.89l-.699.139v10.264c-.608.327-1.168.513-1.635.513-.747 0-.934-.232-1.495-.932l-4.576-7.185v6.952l1.448.327s0 .84-1.169.84l-3.221.186c-.094-.187 0-.654.327-.747l.84-.232V9.853L7.832 9.76c-.093-.42.14-1.026.794-1.073l3.456-.232 4.763 7.279v-6.44l-1.214-.14c-.094-.513.28-.887.747-.933l3.223-.187z" clip-rule="evenodd"/></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%20fill-rule%3D%22evenodd%22%20d%3D%22M15.257.055l-13.31.98C.874%201.128.5%201.83.5%202.667v14.559c0%20.654.233%201.213.794%201.96l3.129%204.06c.513.653.98.794%201.962.745l15.457-.932c1.307-.093%201.681-.7%201.681-1.727V4.954c0-.53-.21-.684-.829-1.135l-.106-.078L18.34.755c-1.027-.746-1.45-.84-3.083-.7zm-8.521%204.63c-1.263.086-1.549.105-2.266-.477L2.647%202.76c-.186-.187-.092-.42.375-.466l12.796-.933c1.074-.094%201.634.28%202.054.606l2.195%201.587c.093.047.326.326.047.326l-13.216.794-.162.01zM5.263%2021.193V7.287c0-.606.187-.886.748-.933l15.176-.886c.515-.047.748.28.748.886v13.81c0%20.609-.093%201.122-.934%201.168l-14.523.84c-.842.047-1.215-.232-1.215-.98zm14.338-13.16c.093.422%200%20.842-.422.89l-.699.139v10.264c-.608.327-1.168.513-1.635.513-.747%200-.934-.232-1.495-.932l-4.576-7.185v6.952l1.448.327s0%20.84-1.169.84l-3.221.186c-.094-.187%200-.654.327-.747l.84-.232V9.853L7.832%209.76c-.093-.42.14-1.026.794-1.073l3.456-.232%204.763%207.279v-6.44l-1.214-.14c-.094-.513.28-.887.747-.933l3.223-.187z%22%20clip-rule%3D%22evenodd%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%20fill-rule%3D%22evenodd%22%20d%3D%22M15.257.055l-13.31.98C.874%201.128.5%201.83.5%202.667v14.559c0%20.654.233%201.213.794%201.96l3.129%204.06c.513.653.98.794%201.962.745l15.457-.932c1.307-.093%201.681-.7%201.681-1.727V4.954c0-.53-.21-.684-.829-1.135l-.106-.078L18.34.755c-1.027-.746-1.45-.84-3.083-.7zm-8.521%204.63c-1.263.086-1.549.105-2.266-.477L2.647%202.76c-.186-.187-.092-.42.375-.466l12.796-.933c1.074-.094%201.634.28%202.054.606l2.195%201.587c.093.047.326.326.047.326l-13.216.794-.162.01zM5.263%2021.193V7.287c0-.606.187-.886.748-.933l15.176-.886c.515-.047.748.28.748.886v13.81c0%20.609-.093%201.122-.934%201.168l-14.523.84c-.842.047-1.215-.232-1.215-.98zm14.338-13.16c.093.422%200%20.842-.422.89l-.699.139v10.264c-.608.327-1.168.513-1.635.513-.747%200-.934-.232-1.495-.932l-4.576-7.185v6.952l1.448.327s0%20.84-1.169.84l-3.221.186c-.094-.187%200-.654.327-.747l.84-.232V9.853L7.832%209.76c-.093-.42.14-1.026.794-1.073l3.456-.232%204.763%207.279v-6.44l-1.214-.14c-.094-.513.28-.887.747-.933l3.223-.187z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lobehub/notion.svg?color=%231a73e8&size=48
