Add icons to this collection by clicking the heart icon.
Notes icon - also known as interface, education, notebook, notes, note, writing, writing tool, and notepad. Created in a clean gradient style, 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="100"
height="100"
viewBox="0 0 512 512"
>
<linearGradient
id="a"
x1="74.981"
x2="437.019"
y1="439.019"
y2="76.981"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffb835" />
<stop offset="1" stop-color="#f70" />
</linearGradient>
<circle cx="256" cy="256" r="256" fill="url(#a)" />
<linearGradient
id="b"
x1="174.5"
x2="357.85"
y1="101.765"
y2="101.765"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#cbed96" />
<stop offset="1" stop-color="#7dd636" />
</linearGradient>
<path d="M118.38 393.64h275.24v37.19H118.38z" fill="url(#b)" />
<linearGradient
id="c"
x1="174.5"
x2="357.85"
y1="244.405"
y2="244.405"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".001" stop-color="#fff" />
<stop offset="1" stop-color="#fff4c8" />
</linearGradient>
<path d="M118.38 141.85h275.24v255.49H118.38z" fill="url(#c)" />
<linearGradient
id="d"
x1="174.5"
x2="357.85"
y1="398.228"
y2="398.228"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#00eed0" />
<stop offset="1" stop-color="#00af94" />
</linearGradient>
<path d="M118.38 85.89h275.24v59.764H118.38z" fill="url(#d)" />
<linearGradient
id="e"
x1="174.5"
x2="357.85"
y1="428.115"
y2="428.115"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".001" stop-color="#fff" />
<stop offset="1" stop-color="#fff4c8" />
</linearGradient>
<path
d="M168.094 113.692h-.053c-7.042 0-12.75-5.708-12.75-12.75V70.827c0-7.042 5.708-12.75 12.75-12.75h.053c7.042 0 12.75 5.708 12.75 12.75v30.115c0 7.042-5.708 12.75-12.75 12.75z"
fill="url(#e)"
/>
<linearGradient
id="f"
x1="174.5"
x2="357.85"
y1="428.115"
y2="428.115"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".001" stop-color="#fff" />
<stop offset="1" stop-color="#fff4c8" />
</linearGradient>
<path
d="M226.716 113.692h-.053c-7.042 0-12.75-5.708-12.75-12.75V70.827c0-7.042 5.708-12.75 12.75-12.75h.053c7.042 0 12.75 5.708 12.75 12.75v30.115c0 7.042-5.709 12.75-12.75 12.75z"
fill="url(#f)"
/>
<linearGradient
id="g"
x1="174.5"
x2="357.85"
y1="428.115"
y2="428.115"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".001" stop-color="#fff" />
<stop offset="1" stop-color="#fff4c8" />
</linearGradient>
<path
d="M285.337 113.692h-.053c-7.042 0-12.75-5.708-12.75-12.75V70.827c0-7.042 5.708-12.75 12.75-12.75h.053c7.042 0 12.75 5.708 12.75 12.75v30.115c0 7.042-5.708 12.75-12.75 12.75z"
fill="url(#g)"
/>
<linearGradient
id="h"
x1="174.5"
x2="357.85"
y1="428.115"
y2="428.115"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".001" stop-color="#fff" />
<stop offset="1" stop-color="#fff4c8" />
</linearGradient>
<path
d="M343.958 113.692h-.053c-7.042 0-12.75-5.708-12.75-12.75V70.827c0-7.042 5.708-12.75 12.75-12.75h.053c7.042 0 12.75 5.708 12.75 12.75v30.115c0 7.042-5.708 12.75-12.75 12.75z"
fill="url(#h)"
/>
<linearGradient
id="i"
x1="174.5"
x2="357.85"
y1="316.459"
y2="316.459"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M156.77 186.28h50.584v22.521H156.77z" fill="url(#i)" />
<linearGradient
id="j"
x1="174.5"
x2="357.85"
y1="316.459"
y2="316.459"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M228.82 186.28h126.42v22.521H228.82z" fill="url(#j)" />
<linearGradient
id="k"
x1="174.5"
x2="357.85"
y1="267.139"
y2="267.139"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M304.65 235.6h50.584v22.521H304.65z" fill="url(#k)" />
<linearGradient
id="l"
x1="174.5"
x2="357.85"
y1="267.139"
y2="267.139"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M156.77 235.6h29.735v22.521H156.77z" fill="url(#l)" />
<linearGradient
id="m"
x1="174.5"
x2="357.85"
y1="267.139"
y2="267.139"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M207.35 235.6h75.833v22.521H207.35z" fill="url(#m)" />
<linearGradient
id="n"
x1="174.5"
x2="357.85"
y1="217.81"
y2="217.81"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M156.77 284.93h50.584v22.521H156.77z" fill="url(#n)" />
<linearGradient
id="o"
x1="174.5"
x2="357.85"
y1="217.81"
y2="217.81"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M228.82 284.93h126.42v22.521H228.82z" fill="url(#o)" />
<linearGradient
id="p"
x1="174.5"
x2="357.85"
y1="168.489"
y2="168.489"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M304.65 334.25h50.584v22.521H304.65z" fill="url(#p)" />
<linearGradient
id="q"
x1="174.5"
x2="357.85"
y1="168.489"
y2="168.489"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M156.77 334.25h29.735v22.521H156.77z" fill="url(#q)" />
<linearGradient
id="r"
x1="174.5"
x2="357.85"
y1="168.489"
y2="168.489"
gradientTransform="matrix(1 0 0 -1 0 514)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ad1e9e" />
<stop offset="1" stop-color="#5c0254" />
</linearGradient>
<path d="M207.35 334.25h75.833v22.521H207.35z" fill="url(#r)" />
</svg>
More icons in the same style and category