note icon

note-20-filled from Fluent UI System Icons by Microsoft Corporation · 20 Filled · MIT Free for personal and commercial use.

Name: note-20-filled
Set: Fluent UI System Icons
Style: 20 Filled
Viewbox: 20×20
License: MIT

10 other variants in Fluent UI System Icons

note-16-filled note-16-regular note-20-regular note-24-filled note-24-regular note-28-filled note-28-regular note-32-light note-48-filled note-48-regular

The same icon in other sets

noteBoxIcons v2 noteBoxIcons v2 Solid noteCodicons noteFirefox OS Emoji noteHuge Icons noteHumbleicons noteMage Icons noteMaterial Design Icons noteOcticons notePhosphor notePixelarticons noteSimple Icons noteTabler Icons note-outlineTeenyicons note-outlinedWeUI Icon

Related icons in Fluent UI System Icons

note-add-16-filled note-edit-20-filled note-pin-16-filled

Use the note icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14 3a3 3 0 0 1 2.995 2.824L17 6v4h-4l-.176.005a3 3 0 0 0-2.819 2.819L10 13v4H6a3 3 0 0 1-2.995-2.824L3 14V6a3 3 0 0 1 2.824-2.995L6 3zm2.9 8.001a2 2 0 0 1-.358.652l-.128.14l-4.621 4.621c-.224.224-.496.39-.792.487L11 13l.005-.15a2 2 0 0 1 1.838-1.844L13 11z"/></svg>

React

import type { SVGProps } from "react";

export function FluentNote20Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14 3a3 3 0 0 1 2.995 2.824L17 6v4h-4l-.176.005a3 3 0 0 0-2.819 2.819L10 13v4H6a3 3 0 0 1-2.995-2.824L3 14V6a3 3 0 0 1 2.824-2.995L6 3zm2.9 8.001a2 2 0 0 1-.358.652l-.128.14l-4.621 4.621c-.224.224-.496.39-.792.487L11 13l.005-.15a2 2 0 0 1 1.838-1.844L13 11z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14 3a3 3 0 0 1 2.995 2.824L17 6v4h-4l-.176.005a3 3 0 0 0-2.819 2.819L10 13v4H6a3 3 0 0 1-2.995-2.824L3 14V6a3 3 0 0 1 2.824-2.995L6 3zm2.9 8.001a2 2 0 0 1-.358.652l-.128.14l-4.621 4.621c-.224.224-.496.39-.792.487L11 13l.005-.15a2 2 0 0 1 1.838-1.844L13 11z"/></svg>
</template>

CSS

.icon-note-20-filled {
  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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%203a3%203%200%200%201%202.995%202.824L17%206v4h-4l-.176.005a3%203%200%200%200-2.819%202.819L10%2013v4H6a3%203%200%200%201-2.995-2.824L3%2014V6a3%203%200%200%201%202.824-2.995L6%203zm2.9%208.001a2%202%200%200%201-.358.652l-.128.14l-4.621%204.621c-.224.224-.496.39-.792.487L11%2013l.005-.15a2%202%200%200%201%201.838-1.844L13%2011z%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%203a3%203%200%200%201%202.995%202.824L17%206v4h-4l-.176.005a3%203%200%200%200-2.819%202.819L10%2013v4H6a3%203%200%200%201-2.995-2.824L3%2014V6a3%203%200%200%201%202.824-2.995L6%203zm2.9%208.001a2%202%200%200%201-.358.652l-.128.14l-4.621%204.621c-.224.224-.496.39-.792.487L11%2013l.005-.15a2%202%200%200%201%201.838-1.844L13%2011z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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