Color

Advanced editing in SVG Editor

VS Code Codicons

Note Icon

Free SVG icon from the VS Code Codicons collection. Download or copy for use in any project.

Download SVG

Collection: VS Code Codicons
Format: SVG, Font (WOFF2), npm, PNG
License: CC BY 4.0 - Free for commercial use
Tags: note

The Note icon is available as a free SVG and is ready to drop into any web or app project.

img tag

<img src="https://proicons.com/icon/307312.svg" alt="Note icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/307312.svg" alt="Note icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/307312.svg"
  alt="Note icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-note {
  background-image: url('https://proicons.com/icon/307312.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M4.5 2C3.11929 2 2 3.11929 2 4.5V11.5C2 12.8807 3.11929 14 4.5 14H8.17157C8.83461 14 9.4705 13.7366 9.93934 13.2678L13.2678 9.93934C13.7366 9.4705 14 8.83461 14 8.17157V4.5C14 3.11929 12.8807 2 11.5 2H4.5ZM3 4.5C3 3.67157 3.67157 3 4.5 3H11.5C12.3284 3 13 3.67157 13 4.5V8H10.5C9.11929 8 8 9.11929 8 10.5V13H4.5C3.67157 13 3 12.3284 3 11.5V4.5ZM9 12.7505V10.5C9 9.67157 9.67157 9 10.5 9H12.7505C12.6955 9.08295 12.6321 9.16082 12.5607 9.23223L9.23223 12.5607C9.16082 12.6321 9.08295 12.6955 9 12.7505Z"/></svg>

Note in other icon packs

Phosphor Icons

Quiet iCons Pack

Rivet Icons

Hugeicons

EOS Icons Outline

Copied!

Note Icon

More from VS Code Codicons

Note in other icon packs