notion icon logo

notion-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
notion-icon
Set
SVG Logos
Style
Color
Viewbox
256×268
License
CC0

Use the notion icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 268"><path fill="#fff" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188"/><path d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z"/></svg>

React

import type { SVGProps } from "react";

export function LogosNotionIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 268"><path fill="#fff" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188"/><path d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 268"><path fill="#fff" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188"/><path d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z"/></svg>
</template>

CSS

.icon-notion-icon {
  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%20268%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M16.092%2011.538L164.09.608c18.179-1.56%2022.85-.508%2034.28%207.801l47.243%2033.282C253.406%2047.414%20256%2048.975%20256%2055.207v182.527c0%2011.439-4.155%2018.205-18.696%2019.24L65.44%20267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826%20213.814C2.586%20205.487%200%20199.254%200%20191.97V29.726c0-9.352%204.155-17.153%2016.092-18.188%22%2F%3E%3Cpath%20d%3D%22M164.09.608L16.092%2011.538C4.155%2012.573%200%2020.374%200%2029.726v162.245c0%207.284%202.585%2013.516%208.826%2021.843l34.789%2045.237c5.715%207.284%2010.912%208.844%2021.825%208.327l171.864-10.404c14.532-1.035%2018.696-7.801%2018.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37%208.409C186.94.1%20182.27-.952%20164.09.608M69.327%2052.22c-14.033.945-17.216%201.159-25.186-5.323L23.876%2030.778c-2.06-2.086-1.026-4.69%204.163-5.207l142.274-10.395c11.947-1.043%2018.17%203.12%2022.842%206.758l24.401%2017.68c1.043.525%203.638%203.637.517%203.637L71.146%2052.095zm-16.36%20183.954V81.222c0-6.767%202.077-9.887%208.3-10.413L230.02%2060.93c5.724-.517%208.31%203.12%208.31%209.879v153.917c0%206.767-1.044%2012.49-10.387%2013.008l-161.487%209.361c-9.343.517-13.489-2.594-13.489-10.921M212.377%2089.53c1.034%204.681%200%209.362-4.681%209.897l-7.783%201.542v114.404c-6.758%203.637-12.981%205.715-18.18%205.715c-8.308%200-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1%203.646s0%209.362-12.989%209.362l-35.814%202.077c-1.043-2.086%200-7.284%203.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68%201.55-11.439%208.826-11.965l38.426-2.585l52.958%2081.113v-71.76l-13.498-1.552c-1.043-5.733%203.111-9.896%208.3-10.404z%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%20256%20268%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M16.092%2011.538L164.09.608c18.179-1.56%2022.85-.508%2034.28%207.801l47.243%2033.282C253.406%2047.414%20256%2048.975%20256%2055.207v182.527c0%2011.439-4.155%2018.205-18.696%2019.24L65.44%20267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826%20213.814C2.586%20205.487%200%20199.254%200%20191.97V29.726c0-9.352%204.155-17.153%2016.092-18.188%22%2F%3E%3Cpath%20d%3D%22M164.09.608L16.092%2011.538C4.155%2012.573%200%2020.374%200%2029.726v162.245c0%207.284%202.585%2013.516%208.826%2021.843l34.789%2045.237c5.715%207.284%2010.912%208.844%2021.825%208.327l171.864-10.404c14.532-1.035%2018.696-7.801%2018.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37%208.409C186.94.1%20182.27-.952%20164.09.608M69.327%2052.22c-14.033.945-17.216%201.159-25.186-5.323L23.876%2030.778c-2.06-2.086-1.026-4.69%204.163-5.207l142.274-10.395c11.947-1.043%2018.17%203.12%2022.842%206.758l24.401%2017.68c1.043.525%203.638%203.637.517%203.637L71.146%2052.095zm-16.36%20183.954V81.222c0-6.767%202.077-9.887%208.3-10.413L230.02%2060.93c5.724-.517%208.31%203.12%208.31%209.879v153.917c0%206.767-1.044%2012.49-10.387%2013.008l-161.487%209.361c-9.343.517-13.489-2.594-13.489-10.921M212.377%2089.53c1.034%204.681%200%209.362-4.681%209.897l-7.783%201.542v114.404c-6.758%203.637-12.981%205.715-18.18%205.715c-8.308%200-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1%203.646s0%209.362-12.989%209.362l-35.814%202.077c-1.043-2.086%200-7.284%203.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68%201.55-11.439%208.826-11.965l38.426-2.585l52.958%2081.113v-71.76l-13.498-1.552c-1.043-5.733%203.111-9.896%208.3-10.404z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/notion-icon.svg?color=%231a73e8&size=48