notion logo
notion-dark from Skill Icons by tandpfun · Dark · MIT Free for personal and commercial use.
- Name
- notion-dark
- Set
- Skill Icons
- Style
- Dark
- Viewbox
- 256×256
- License
- MIT
1 other variant in Skill 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 256 256"><g fill="none"><g clip-path="url(#SVGv3WPqdcU)"><path fill="#242938" d="M196 0H60C26.863 0 0 26.863 0 60v136c0 33.137 26.863 60 60 60h136c33.137 0 60-26.863 60-60V60c0-33.137-26.863-60-60-60"/><g clip-path="url(#SVG5qy9KbCN)"><path fill="#fff" d="m50.53 47.548l96.832-7.152c11.895-1.02 14.951-.333 22.43 5.105l30.91 21.775c5.098 3.745 6.796 4.765 6.796 8.843v119.425c0 7.485-2.718 11.912-12.233 12.588l-112.448 6.811c-7.14.337-10.54-.683-14.28-5.448l-22.762-29.6C41.692 174.448 40 170.37 40 165.603V59.448c0-6.12 2.718-11.223 10.53-11.9"/><path fill="#000" fill-rule="evenodd" d="M147.362 40.398L50.53 47.55C42.718 48.225 40 53.33 40 59.448v106.155c0 4.765 1.692 8.843 5.775 14.292l22.762 29.598c3.74 4.765 7.14 5.787 14.28 5.448l112.45-6.808c9.508-.677 12.232-5.104 12.232-12.587V76.12c0-3.867-1.527-4.982-6.025-8.282L169.792 45.5c-7.478-5.438-10.535-6.125-22.43-5.105zM85.36 74.165c-9.182.618-11.265.758-16.48-3.482L55.622 60.137c-1.347-1.364-.67-3.067 2.725-3.407l93.088-6.802c7.817-.682 11.888 2.042 14.945 4.422l15.965 11.568c.682.344 2.38 2.38.338 2.38L86.55 74.085zm-10.705 120.36V93.142c0-4.427 1.36-6.47 5.43-6.812L190.5 79.865c3.745-.337 5.437 2.043 5.437 6.463v100.707c0 4.428-.682 8.173-6.795 8.511l-105.66 6.125c-6.112.337-8.825-1.698-8.825-7.146zm104.3-95.947c.678 3.063 0 6.125-3.062 6.475l-5.093 1.01v74.853c-4.422 2.38-8.493 3.739-11.894 3.739c-5.438 0-6.796-1.703-10.868-6.802l-33.302-52.395v50.692l10.535 2.386s0 6.125-8.5 6.125l-23.433 1.359c-.682-1.365 0-4.765 2.375-5.442l6.12-1.698v-67.025l-8.493-.687c-.683-3.063 1.015-7.485 5.775-7.828l25.142-1.692l34.65 53.072v-46.953l-8.832-1.015c-.682-3.75 2.035-6.475 5.43-6.807z" clip-rule="evenodd"/></g></g><defs><clipPath id="SVGv3WPqdcU"><path fill="#fff" d="M0 0h256v256H0z"/></clipPath><clipPath id="SVG5qy9KbCN"><path fill="#fff" d="M40 40h175v175H40z"/></clipPath></defs></g></svg>
React
import type { SVGProps } from "react";
export function SkillIconsNotionDark(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><g clipPath="url(#SVGv3WPqdcU)"><path fill="#242938" d="M196 0H60C26.863 0 0 26.863 0 60v136c0 33.137 26.863 60 60 60h136c33.137 0 60-26.863 60-60V60c0-33.137-26.863-60-60-60"/><g clipPath="url(#SVG5qy9KbCN)"><path fill="#fff" d="m50.53 47.548l96.832-7.152c11.895-1.02 14.951-.333 22.43 5.105l30.91 21.775c5.098 3.745 6.796 4.765 6.796 8.843v119.425c0 7.485-2.718 11.912-12.233 12.588l-112.448 6.811c-7.14.337-10.54-.683-14.28-5.448l-22.762-29.6C41.692 174.448 40 170.37 40 165.603V59.448c0-6.12 2.718-11.223 10.53-11.9"/><path fill="#000" fillRule="evenodd" d="M147.362 40.398L50.53 47.55C42.718 48.225 40 53.33 40 59.448v106.155c0 4.765 1.692 8.843 5.775 14.292l22.762 29.598c3.74 4.765 7.14 5.787 14.28 5.448l112.45-6.808c9.508-.677 12.232-5.104 12.232-12.587V76.12c0-3.867-1.527-4.982-6.025-8.282L169.792 45.5c-7.478-5.438-10.535-6.125-22.43-5.105zM85.36 74.165c-9.182.618-11.265.758-16.48-3.482L55.622 60.137c-1.347-1.364-.67-3.067 2.725-3.407l93.088-6.802c7.817-.682 11.888 2.042 14.945 4.422l15.965 11.568c.682.344 2.38 2.38.338 2.38L86.55 74.085zm-10.705 120.36V93.142c0-4.427 1.36-6.47 5.43-6.812L190.5 79.865c3.745-.337 5.437 2.043 5.437 6.463v100.707c0 4.428-.682 8.173-6.795 8.511l-105.66 6.125c-6.112.337-8.825-1.698-8.825-7.146zm104.3-95.947c.678 3.063 0 6.125-3.062 6.475l-5.093 1.01v74.853c-4.422 2.38-8.493 3.739-11.894 3.739c-5.438 0-6.796-1.703-10.868-6.802l-33.302-52.395v50.692l10.535 2.386s0 6.125-8.5 6.125l-23.433 1.359c-.682-1.365 0-4.765 2.375-5.442l6.12-1.698v-67.025l-8.493-.687c-.683-3.063 1.015-7.485 5.775-7.828l25.142-1.692l34.65 53.072v-46.953l-8.832-1.015c-.682-3.75 2.035-6.475 5.43-6.807z" clipRule="evenodd"/></g></g><defs><clipPath id="SVGv3WPqdcU"><path fill="#fff" d="M0 0h256v256H0z"/></clipPath><clipPath id="SVG5qy9KbCN"><path fill="#fff" d="M40 40h175v175H40z"/></clipPath></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="none"><g clip-path="url(#SVGv3WPqdcU)"><path fill="#242938" d="M196 0H60C26.863 0 0 26.863 0 60v136c0 33.137 26.863 60 60 60h136c33.137 0 60-26.863 60-60V60c0-33.137-26.863-60-60-60"/><g clip-path="url(#SVG5qy9KbCN)"><path fill="#fff" d="m50.53 47.548l96.832-7.152c11.895-1.02 14.951-.333 22.43 5.105l30.91 21.775c5.098 3.745 6.796 4.765 6.796 8.843v119.425c0 7.485-2.718 11.912-12.233 12.588l-112.448 6.811c-7.14.337-10.54-.683-14.28-5.448l-22.762-29.6C41.692 174.448 40 170.37 40 165.603V59.448c0-6.12 2.718-11.223 10.53-11.9"/><path fill="#000" fill-rule="evenodd" d="M147.362 40.398L50.53 47.55C42.718 48.225 40 53.33 40 59.448v106.155c0 4.765 1.692 8.843 5.775 14.292l22.762 29.598c3.74 4.765 7.14 5.787 14.28 5.448l112.45-6.808c9.508-.677 12.232-5.104 12.232-12.587V76.12c0-3.867-1.527-4.982-6.025-8.282L169.792 45.5c-7.478-5.438-10.535-6.125-22.43-5.105zM85.36 74.165c-9.182.618-11.265.758-16.48-3.482L55.622 60.137c-1.347-1.364-.67-3.067 2.725-3.407l93.088-6.802c7.817-.682 11.888 2.042 14.945 4.422l15.965 11.568c.682.344 2.38 2.38.338 2.38L86.55 74.085zm-10.705 120.36V93.142c0-4.427 1.36-6.47 5.43-6.812L190.5 79.865c3.745-.337 5.437 2.043 5.437 6.463v100.707c0 4.428-.682 8.173-6.795 8.511l-105.66 6.125c-6.112.337-8.825-1.698-8.825-7.146zm104.3-95.947c.678 3.063 0 6.125-3.062 6.475l-5.093 1.01v74.853c-4.422 2.38-8.493 3.739-11.894 3.739c-5.438 0-6.796-1.703-10.868-6.802l-33.302-52.395v50.692l10.535 2.386s0 6.125-8.5 6.125l-23.433 1.359c-.682-1.365 0-4.765 2.375-5.442l6.12-1.698v-67.025l-8.493-.687c-.683-3.063 1.015-7.485 5.775-7.828l25.142-1.692l34.65 53.072v-46.953l-8.832-1.015c-.682-3.75 2.035-6.475 5.43-6.807z" clip-rule="evenodd"/></g></g><defs><clipPath id="SVGv3WPqdcU"><path fill="#fff" d="M0 0h256v256H0z"/></clipPath><clipPath id="SVG5qy9KbCN"><path fill="#fff" d="M40 40h175v175H40z"/></clipPath></defs></g></svg> </template>
CSS
.icon-notion-dark {
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%20256%20256%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGv3WPqdcU)%22%3E%3Cpath%20fill%3D%22%23242938%22%20d%3D%22M196%200H60C26.863%200%200%2026.863%200%2060v136c0%2033.137%2026.863%2060%2060%2060h136c33.137%200%2060-26.863%2060-60V60c0-33.137-26.863-60-60-60%22%2F%3E%3Cg%20clip-path%3D%22url(%23SVG5qy9KbCN)%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m50.53%2047.548l96.832-7.152c11.895-1.02%2014.951-.333%2022.43%205.105l30.91%2021.775c5.098%203.745%206.796%204.765%206.796%208.843v119.425c0%207.485-2.718%2011.912-12.233%2012.588l-112.448%206.811c-7.14.337-10.54-.683-14.28-5.448l-22.762-29.6C41.692%20174.448%2040%20170.37%2040%20165.603V59.448c0-6.12%202.718-11.223%2010.53-11.9%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M147.362%2040.398L50.53%2047.55C42.718%2048.225%2040%2053.33%2040%2059.448v106.155c0%204.765%201.692%208.843%205.775%2014.292l22.762%2029.598c3.74%204.765%207.14%205.787%2014.28%205.448l112.45-6.808c9.508-.677%2012.232-5.104%2012.232-12.587V76.12c0-3.867-1.527-4.982-6.025-8.282L169.792%2045.5c-7.478-5.438-10.535-6.125-22.43-5.105zM85.36%2074.165c-9.182.618-11.265.758-16.48-3.482L55.622%2060.137c-1.347-1.364-.67-3.067%202.725-3.407l93.088-6.802c7.817-.682%2011.888%202.042%2014.945%204.422l15.965%2011.568c.682.344%202.38%202.38.338%202.38L86.55%2074.085zm-10.705%20120.36V93.142c0-4.427%201.36-6.47%205.43-6.812L190.5%2079.865c3.745-.337%205.437%202.043%205.437%206.463v100.707c0%204.428-.682%208.173-6.795%208.511l-105.66%206.125c-6.112.337-8.825-1.698-8.825-7.146zm104.3-95.947c.678%203.063%200%206.125-3.062%206.475l-5.093%201.01v74.853c-4.422%202.38-8.493%203.739-11.894%203.739c-5.438%200-6.796-1.703-10.868-6.802l-33.302-52.395v50.692l10.535%202.386s0%206.125-8.5%206.125l-23.433%201.359c-.682-1.365%200-4.765%202.375-5.442l6.12-1.698v-67.025l-8.493-.687c-.683-3.063%201.015-7.485%205.775-7.828l25.142-1.692l34.65%2053.072v-46.953l-8.832-1.015c-.682-3.75%202.035-6.475%205.43-6.807z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGv3WPqdcU%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h256v256H0z%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22SVG5qy9KbCN%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M40%2040h175v175H40z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%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%20256%20256%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGv3WPqdcU)%22%3E%3Cpath%20fill%3D%22%23242938%22%20d%3D%22M196%200H60C26.863%200%200%2026.863%200%2060v136c0%2033.137%2026.863%2060%2060%2060h136c33.137%200%2060-26.863%2060-60V60c0-33.137-26.863-60-60-60%22%2F%3E%3Cg%20clip-path%3D%22url(%23SVG5qy9KbCN)%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m50.53%2047.548l96.832-7.152c11.895-1.02%2014.951-.333%2022.43%205.105l30.91%2021.775c5.098%203.745%206.796%204.765%206.796%208.843v119.425c0%207.485-2.718%2011.912-12.233%2012.588l-112.448%206.811c-7.14.337-10.54-.683-14.28-5.448l-22.762-29.6C41.692%20174.448%2040%20170.37%2040%20165.603V59.448c0-6.12%202.718-11.223%2010.53-11.9%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M147.362%2040.398L50.53%2047.55C42.718%2048.225%2040%2053.33%2040%2059.448v106.155c0%204.765%201.692%208.843%205.775%2014.292l22.762%2029.598c3.74%204.765%207.14%205.787%2014.28%205.448l112.45-6.808c9.508-.677%2012.232-5.104%2012.232-12.587V76.12c0-3.867-1.527-4.982-6.025-8.282L169.792%2045.5c-7.478-5.438-10.535-6.125-22.43-5.105zM85.36%2074.165c-9.182.618-11.265.758-16.48-3.482L55.622%2060.137c-1.347-1.364-.67-3.067%202.725-3.407l93.088-6.802c7.817-.682%2011.888%202.042%2014.945%204.422l15.965%2011.568c.682.344%202.38%202.38.338%202.38L86.55%2074.085zm-10.705%20120.36V93.142c0-4.427%201.36-6.47%205.43-6.812L190.5%2079.865c3.745-.337%205.437%202.043%205.437%206.463v100.707c0%204.428-.682%208.173-6.795%208.511l-105.66%206.125c-6.112.337-8.825-1.698-8.825-7.146zm104.3-95.947c.678%203.063%200%206.125-3.062%206.475l-5.093%201.01v74.853c-4.422%202.38-8.493%203.739-11.894%203.739c-5.438%200-6.796-1.703-10.868-6.802l-33.302-52.395v50.692l10.535%202.386s0%206.125-8.5%206.125l-23.433%201.359c-.682-1.365%200-4.765%202.375-5.442l6.12-1.698v-67.025l-8.493-.687c-.683-3.063%201.015-7.485%205.775-7.828l25.142-1.692l34.65%2053.072v-46.953l-8.832-1.015c-.682-3.75%202.035-6.475%205.43-6.807z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGv3WPqdcU%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h256v256H0z%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22SVG5qy9KbCN%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M40%2040h175v175H40z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/skill-icons/notion-dark.svg?color=%231a73e8&size=48
