notepad icon

notepad-48-regular from Fluent UI System Icons by Microsoft Corporation · 48 Regular · MIT Free for personal and commercial use.

Name: notepad-48-regular
Set: Fluent UI System Icons
Style: 48 Regular
Viewbox: 48×48
License: MIT

13 other variants in Fluent UI System Icons

notepad-12-filled notepad-12-regular notepad-16-filled notepad-16-regular notepad-20-filled notepad-20-regular notepad-24-filled notepad-24-regular notepad-28-filled notepad-28-regular notepad-32-filled notepad-32-regular notepad-48-filled

The same icon in other sets

notepadBoxIcons v2 notepadBoxIcons v2 Solid notepadFirefox OS Emoji notepadIconPark notepadIconPark Outline notepadIconPark Solid notepadIconPark TwoTone notepadPhosphor

Related icons in Fluent UI System Icons

notepad-edit-16-filled notepad-person-16-filled notepad-person-off-16-filled notepad-sparkle-16-filled

Use the notepad icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M31.75 4c.69 0 1.25.56 1.25 1.25V7h1.75A4.25 4.25 0 0 1 39 11.25v21.336a2.25 2.25 0 0 1-.66 1.59l-8.163 8.165a2.25 2.25 0 0 1-1.591.659H13.25A4.25 4.25 0 0 1 9 38.75v-27.5A4.25 4.25 0 0 1 13.25 7H15V5.25a1.25 1.25 0 1 1 2.5 0V7h5.25V5.25a1.25 1.25 0 1 1 2.5 0V7h5.25V5.25c0-.69.56-1.25 1.25-1.25m-18.5 5.5a1.75 1.75 0 0 0-1.75 1.75v27.5c0 .967.784 1.75 1.75 1.75H27v-5.25A4.25 4.25 0 0 1 31.25 31h5.25V11.25a1.75 1.75 0 0 0-1.75-1.75zm18 24a1.75 1.75 0 0 0-1.75 1.75v4.232l5.982-5.982zm-8.372-2.493a1.25 1.25 0 0 1 0 2.486l-.128.007h-5.5a1.25 1.25 0 1 1 0-2.5h5.5zM30.75 23a1.25 1.25 0 1 1 0 2.5h-13.5a1.25 1.25 0 1 1 0-2.5zm0-8a1.25 1.25 0 1 1 0 2.5h-13.5a1.25 1.25 0 1 1 0-2.5z"/></svg>

React

import type { SVGProps } from "react";

export function FluentNotepad48Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M31.75 4c.69 0 1.25.56 1.25 1.25V7h1.75A4.25 4.25 0 0 1 39 11.25v21.336a2.25 2.25 0 0 1-.66 1.59l-8.163 8.165a2.25 2.25 0 0 1-1.591.659H13.25A4.25 4.25 0 0 1 9 38.75v-27.5A4.25 4.25 0 0 1 13.25 7H15V5.25a1.25 1.25 0 1 1 2.5 0V7h5.25V5.25a1.25 1.25 0 1 1 2.5 0V7h5.25V5.25c0-.69.56-1.25 1.25-1.25m-18.5 5.5a1.75 1.75 0 0 0-1.75 1.75v27.5c0 .967.784 1.75 1.75 1.75H27v-5.25A4.25 4.25 0 0 1 31.25 31h5.25V11.25a1.75 1.75 0 0 0-1.75-1.75zm18 24a1.75 1.75 0 0 0-1.75 1.75v4.232l5.982-5.982zm-8.372-2.493a1.25 1.25 0 0 1 0 2.486l-.128.007h-5.5a1.25 1.25 0 1 1 0-2.5h5.5zM30.75 23a1.25 1.25 0 1 1 0 2.5h-13.5a1.25 1.25 0 1 1 0-2.5zm0-8a1.25 1.25 0 1 1 0 2.5h-13.5a1.25 1.25 0 1 1 0-2.5z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M31.75 4c.69 0 1.25.56 1.25 1.25V7h1.75A4.25 4.25 0 0 1 39 11.25v21.336a2.25 2.25 0 0 1-.66 1.59l-8.163 8.165a2.25 2.25 0 0 1-1.591.659H13.25A4.25 4.25 0 0 1 9 38.75v-27.5A4.25 4.25 0 0 1 13.25 7H15V5.25a1.25 1.25 0 1 1 2.5 0V7h5.25V5.25a1.25 1.25 0 1 1 2.5 0V7h5.25V5.25c0-.69.56-1.25 1.25-1.25m-18.5 5.5a1.75 1.75 0 0 0-1.75 1.75v27.5c0 .967.784 1.75 1.75 1.75H27v-5.25A4.25 4.25 0 0 1 31.25 31h5.25V11.25a1.75 1.75 0 0 0-1.75-1.75zm18 24a1.75 1.75 0 0 0-1.75 1.75v4.232l5.982-5.982zm-8.372-2.493a1.25 1.25 0 0 1 0 2.486l-.128.007h-5.5a1.25 1.25 0 1 1 0-2.5h5.5zM30.75 23a1.25 1.25 0 1 1 0 2.5h-13.5a1.25 1.25 0 1 1 0-2.5zm0-8a1.25 1.25 0 1 1 0 2.5h-13.5a1.25 1.25 0 1 1 0-2.5z"/></svg>
</template>

CSS

.icon-notepad-48-regular {
  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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M31.75%204c.69%200%201.25.56%201.25%201.25V7h1.75A4.25%204.25%200%200%201%2039%2011.25v21.336a2.25%202.25%200%200%201-.66%201.59l-8.163%208.165a2.25%202.25%200%200%201-1.591.659H13.25A4.25%204.25%200%200%201%209%2038.75v-27.5A4.25%204.25%200%200%201%2013.25%207H15V5.25a1.25%201.25%200%201%201%202.5%200V7h5.25V5.25a1.25%201.25%200%201%201%202.5%200V7h5.25V5.25c0-.69.56-1.25%201.25-1.25m-18.5%205.5a1.75%201.75%200%200%200-1.75%201.75v27.5c0%20.967.784%201.75%201.75%201.75H27v-5.25A4.25%204.25%200%200%201%2031.25%2031h5.25V11.25a1.75%201.75%200%200%200-1.75-1.75zm18%2024a1.75%201.75%200%200%200-1.75%201.75v4.232l5.982-5.982zm-8.372-2.493a1.25%201.25%200%200%201%200%202.486l-.128.007h-5.5a1.25%201.25%200%201%201%200-2.5h5.5zM30.75%2023a1.25%201.25%200%201%201%200%202.5h-13.5a1.25%201.25%200%201%201%200-2.5zm0-8a1.25%201.25%200%201%201%200%202.5h-13.5a1.25%201.25%200%201%201%200-2.5z%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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M31.75%204c.69%200%201.25.56%201.25%201.25V7h1.75A4.25%204.25%200%200%201%2039%2011.25v21.336a2.25%202.25%200%200%201-.66%201.59l-8.163%208.165a2.25%202.25%200%200%201-1.591.659H13.25A4.25%204.25%200%200%201%209%2038.75v-27.5A4.25%204.25%200%200%201%2013.25%207H15V5.25a1.25%201.25%200%201%201%202.5%200V7h5.25V5.25a1.25%201.25%200%201%201%202.5%200V7h5.25V5.25c0-.69.56-1.25%201.25-1.25m-18.5%205.5a1.75%201.75%200%200%200-1.75%201.75v27.5c0%20.967.784%201.75%201.75%201.75H27v-5.25A4.25%204.25%200%200%201%2031.25%2031h5.25V11.25a1.75%201.75%200%200%200-1.75-1.75zm18%2024a1.75%201.75%200%200%200-1.75%201.75v4.232l5.982-5.982zm-8.372-2.493a1.25%201.25%200%200%201%200%202.486l-.128.007h-5.5a1.25%201.25%200%201%201%200-2.5h5.5zM30.75%2023a1.25%201.25%200%201%201%200%202.5h-13.5a1.25%201.25%200%201%201%200-2.5zm0-8a1.25%201.25%200%201%201%200%202.5h-13.5a1.25%201.25%200%201%201%200-2.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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