Add icons to this collection by clicking the heart icon.
Notebook icon - also known as education, study, write, notebook, pencil, workbook, note, planning, and lecture. Created in a clean flat gradient style with a white finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 32 32"
>
<linearGradient
id="b"
x1="4"
x2="23"
y1="16"
y2="16"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#e57373" />
<stop offset="1" stop-color="#ef9a9a" />
</linearGradient>
<linearGradient
id="a"
x1="2"
x2="7"
y1="8"
y2="8"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#1565c0" />
<stop offset="1" stop-color="#1e88e5" />
</linearGradient>
<linearGradient id="d" y1="12" y2="12" href="#a" />
<linearGradient id="e" y1="16" y2="16" href="#a" />
<linearGradient id="f" y1="20" y2="20" href="#a" />
<linearGradient id="g" y1="24" y2="24" href="#a" />
<linearGradient id="h" x1="24" x2="30" y1="6" y2="6" href="#b" />
<linearGradient
id="c"
x1="24"
x2="30"
y1="18"
y2="18"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#64b5f6" />
<stop offset="1" stop-color="#bbdefb" />
</linearGradient>
<linearGradient id="i" x1="9" x2="20" y1="12" y2="12" href="#c" />
<g>
<rect width="19" height="24" x="4" y="4" fill="url(#b)" rx="1" />
<path
d="M6 28H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h1a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1z"
opacity=".1"
/>
<path
fill="#fff"
d="M23 5v22a1 1 0 0 1-1 1h-1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h1a1 1 0 0 1 1 1z"
opacity=".19"
/>
<path
d="M7 9a1 1 0 0 1-1 1H4V8h2a1 1 0 0 1 1 1zM7 13a1 1 0 0 1-1 1H4v-2h2a1 1 0 0 1 1 1zM7 17a1 1 0 0 1-1 1H4v-2h2a1 1 0 0 1 1 1zM7 21a1 1 0 0 1-1 1H4v-2h2a1 1 0 0 1 1 1zM7 25a1 1 0 0 1-1 1H4v-2h2a1 1 0 0 1 1 1z"
opacity=".1"
/>
<path fill="url(#a)" d="M6 9H3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" />
<path fill="url(#d)" d="M6 13H3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" />
<path fill="url(#e)" d="M6 17H3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" />
<path fill="url(#f)" d="M6 21H3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" />
<path fill="url(#g)" d="M6 25H3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" />
<path fill="url(#h)" d="M30 5v3h-6V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z" />
<path d="M26 4a1 1 0 0 0-1 1v3h-1V5a1 1 0 0 1 1-1z" opacity=".1" />
<path
fill="#fff"
d="M30 5v3h-1V5a1 1 0 0 0-1-1h1a1 1 0 0 1 1 1z"
opacity=".19"
/>
<path
fill="url(#c)"
d="M30 8v15a1 1 0 0 1-.11.45l-2 4a1 1 0 0 1-1.78 0l-2-4A1 1 0 0 1 24 23V8z"
/>
<path
d="M27.5 27.86a1 1 0 0 1-.5.14 1 1 0 0 1-.89-.55l-2-4A1 1 0 0 1 24 23V8h1v15a1 1 0 0 0 .11.45l2 4a.86.86 0 0 0 .39.41z"
opacity=".1"
/>
<path
fill="#fff"
d="M30 8v15a1 1 0 0 1-.11.45l-2 4A1 1 0 0 1 27 28a1 1 0 0 1-.5-.14.86.86 0 0 0 .39-.41l2-4A1 1 0 0 0 29 23V8z"
opacity=".19"
/>
<path d="M24 9h6v2h-6z" opacity=".1" />
<path fill="#fff" d="M24 8h6v2h-6z" />
<rect width="11" height="8" x="9" y="9" opacity=".1" rx="1" />
<rect width="11" height="8" x="9" y="8" fill="url(#i)" rx="1" />
<path
d="M11 16h-1a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1z"
opacity=".1"
/>
<path
fill="#fff"
d="M20 9v6a1 1 0 0 1-1 1h-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h1a1 1 0 0 1 1 1z"
opacity=".19"
/>
<path d="M13 21h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" opacity=".1" />
<circle cx="16" cy="20" r="1" opacity=".1" />
<circle cx="19" cy="20" r="1" opacity=".1" />
<path d="M19 25h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" opacity=".1" />
<circle cx="13" cy="24" r="1" opacity=".1" />
<circle cx="10" cy="24" r="1" opacity=".1" />
<g fill="#fff">
<path d="M13 20h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" />
<circle cx="16" cy="19" r="1" />
<circle cx="19" cy="19" r="1" />
<path d="M19 24h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2z" />
<circle cx="13" cy="23" r="1" />
<circle cx="10" cy="23" r="1" />
</g>
</g>
</svg>
More icons in the same style and category