IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

Document icon - Lineal Gradient | SVG & PNG Free Download

Style Variants

Document

Stationery And Office 5

Document icon - also known as interface, file, document, text, Tools and utensils, archive, news, text lines, and files and folders. Created in a clean lineal gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.

7/24/2025

Tags

Tools and utensils

files and folders

Usage Snippets

Document.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="100"
    height="100"
    viewBox="0 0 496 496"
>
    <linearGradient
        id="a"
        x1="-54.904"
        x2="18.09"
        y1="555.005"
        y2="627.999"
        gradientTransform="matrix(8 0 0 -8 398.132 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#aa6100" />
        <stop offset=".093" stop-color="#ac6400" />
        <stop offset=".165" stop-color="#b26e00" />
        <stop offset=".231" stop-color="#bb7e00" />
        <stop offset=".292" stop-color="#c99600" />
        <stop offset=".35" stop-color="#dbb400" />
        <stop offset=".405" stop-color="#f0d800" />
        <stop offset=".439" stop-color="#fff200" />
        <stop offset=".474" stop-color="#ffd705" />
        <stop offset=".519" stop-color="#ffbb0a" />
        <stop offset=".565" stop-color="#ffa80e" />
        <stop offset=".611" stop-color="#ff9c10" />
        <stop offset=".658" stop-color="#ff9811" />
        <stop offset=".732" stop-color="#ff9a12" />
        <stop offset=".758" stop-color="#ffa118" />
        <stop offset=".777" stop-color="#ffac21" />
        <stop offset=".793" stop-color="#ffbd2e" />
        <stop offset=".806" stop-color="#ffd33f" />
        <stop offset=".809" stop-color="#ffda44" />
        <stop offset=".879" stop-color="#dda928" />
        <stop offset=".96" stop-color="#b8750b" />
        <stop offset="1" stop-color="#aa6100" />
    </linearGradient>
    <path
        d="M408.124 0h-248a7.897 7.897 0 0 0-5.824 2.592l-71.808 71.2a10.397 10.397 0 0 0-2.616 6.232c.05.419.133.834.248 1.24V488a8 8 0 0 0 8 8h320a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8zm-256 27.272V72h-45.12l45.12-44.728zm248 452.728h-304V88h64a8 8 0 0 0 8-8V16h232v464z"
        fill="url(#a)"
    />
    <linearGradient
        id="b"
        x1="-61.139"
        x2="11.857"
        y1="561.236"
        y2="634.234"
        gradientTransform="matrix(8 0 0 -8 398.132 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#aa6100" />
        <stop offset=".093" stop-color="#ac6400" />
        <stop offset=".165" stop-color="#b26e00" />
        <stop offset=".231" stop-color="#bb7e00" />
        <stop offset=".292" stop-color="#c99600" />
        <stop offset=".35" stop-color="#dbb400" />
        <stop offset=".405" stop-color="#f0d800" />
        <stop offset=".439" stop-color="#fff200" />
        <stop offset=".474" stop-color="#ffd705" />
        <stop offset=".519" stop-color="#ffbb0a" />
        <stop offset=".565" stop-color="#ffa80e" />
        <stop offset=".611" stop-color="#ff9c10" />
        <stop offset=".658" stop-color="#ff9811" />
        <stop offset=".732" stop-color="#ff9a12" />
        <stop offset=".758" stop-color="#ffa118" />
        <stop offset=".777" stop-color="#ffac21" />
        <stop offset=".793" stop-color="#ffbd2e" />
        <stop offset=".806" stop-color="#ffd33f" />
        <stop offset=".809" stop-color="#ffda44" />
        <stop offset=".879" stop-color="#dda928" />
        <stop offset=".96" stop-color="#b8750b" />
        <stop offset="1" stop-color="#aa6100" />
    </linearGradient>
    <path
        d="M136.124 176a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16h-224z"
        fill="url(#b)"
    />
    <linearGradient
        id="c"
        x1="-59.139"
        x2="13.857"
        y1="559.236"
        y2="632.234"
        gradientTransform="matrix(8 0 0 -8 398.132 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#aa6100" />
        <stop offset=".093" stop-color="#ac6400" />
        <stop offset=".165" stop-color="#b26e00" />
        <stop offset=".231" stop-color="#bb7e00" />
        <stop offset=".292" stop-color="#c99600" />
        <stop offset=".35" stop-color="#dbb400" />
        <stop offset=".405" stop-color="#f0d800" />
        <stop offset=".439" stop-color="#fff200" />
        <stop offset=".474" stop-color="#ffd705" />
        <stop offset=".519" stop-color="#ffbb0a" />
        <stop offset=".565" stop-color="#ffa80e" />
        <stop offset=".611" stop-color="#ff9c10" />
        <stop offset=".658" stop-color="#ff9811" />
        <stop offset=".732" stop-color="#ff9a12" />
        <stop offset=".758" stop-color="#ffa118" />
        <stop offset=".777" stop-color="#ffac21" />
        <stop offset=".793" stop-color="#ffbd2e" />
        <stop offset=".806" stop-color="#ffd33f" />
        <stop offset=".809" stop-color="#ffda44" />
        <stop offset=".879" stop-color="#dda928" />
        <stop offset=".96" stop-color="#b8750b" />
        <stop offset="1" stop-color="#aa6100" />
    </linearGradient>
    <path
        d="M360.124 208h-224a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16z"
        fill="url(#c)"
    />
    <linearGradient
        id="d"
        x1="-57.139"
        x2="15.857"
        y1="557.236"
        y2="630.234"
        gradientTransform="matrix(8 0 0 -8 398.132 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#aa6100" />
        <stop offset=".093" stop-color="#ac6400" />
        <stop offset=".165" stop-color="#b26e00" />
        <stop offset=".231" stop-color="#bb7e00" />
        <stop offset=".292" stop-color="#c99600" />
        <stop offset=".35" stop-color="#dbb400" />
        <stop offset=".405" stop-color="#f0d800" />
        <stop offset=".439" stop-color="#fff200" />
        <stop offset=".474" stop-color="#ffd705" />
        <stop offset=".519" stop-color="#ffbb0a" />
        <stop offset=".565" stop-color="#ffa80e" />
        <stop offset=".611" stop-color="#ff9c10" />
        <stop offset=".658" stop-color="#ff9811" />
        <stop offset=".732" stop-color="#ff9a12" />
        <stop offset=".758" stop-color="#ffa118" />
        <stop offset=".777" stop-color="#ffac21" />
        <stop offset=".793" stop-color="#ffbd2e" />
        <stop offset=".806" stop-color="#ffd33f" />
        <stop offset=".809" stop-color="#ffda44" />
        <stop offset=".879" stop-color="#dda928" />
        <stop offset=".96" stop-color="#b8750b" />
        <stop offset="1" stop-color="#aa6100" />
    </linearGradient>
    <path
        d="M360.124 240h-224a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16z"
        fill="url(#d)"
    />
    <linearGradient
        id="e"
        x1="-55.139"
        x2="17.858"
        y1="555.236"
        y2="628.234"
        gradientTransform="matrix(8 0 0 -8 398.132 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#aa6100" />
        <stop offset=".093" stop-color="#ac6400" />
        <stop offset=".165" stop-color="#b26e00" />
        <stop offset=".231" stop-color="#bb7e00" />
        <stop offset=".292" stop-color="#c99600" />
        <stop offset=".35" stop-color="#dbb400" />
        <stop offset=".405" stop-color="#f0d800" />
        <stop offset=".439" stop-color="#fff200" />
        <stop offset=".474" stop-color="#ffd705" />
        <stop offset=".519" stop-color="#ffbb0a" />
        <stop offset=".565" stop-color="#ffa80e" />
        <stop offset=".611" stop-color="#ff9c10" />
        <stop offset=".658" stop-color="#ff9811" />
        <stop offset=".732" stop-color="#ff9a12" />
        <stop offset=".758" stop-color="#ffa118" />
        <stop offset=".777" stop-color="#ffac21" />
        <stop offset=".793" stop-color="#ffbd2e" />
        <stop offset=".806" stop-color="#ffd33f" />
        <stop offset=".809" stop-color="#ffda44" />
        <stop offset=".879" stop-color="#dda928" />
        <stop offset=".96" stop-color="#b8750b" />
        <stop offset="1" stop-color="#aa6100" />
    </linearGradient>
    <path
        d="M360.124 272h-224a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16z"
        fill="url(#e)"
    />
    <linearGradient
        id="f"
        x1="-53.139"
        x2="19.858"
        y1="553.236"
        y2="626.234"
        gradientTransform="matrix(8 0 0 -8 398.132 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#aa6100" />
        <stop offset=".093" stop-color="#ac6400" />
        <stop offset=".165" stop-color="#b26e00" />
        <stop offset=".231" stop-color="#bb7e00" />
        <stop offset=".292" stop-color="#c99600" />
        <stop offset=".35" stop-color="#dbb400" />
        <stop offset=".405" stop-color="#f0d800" />
        <stop offset=".439" stop-color="#fff200" />
        <stop offset=".474" stop-color="#ffd705" />
        <stop offset=".519" stop-color="#ffbb0a" />
        <stop offset=".565" stop-color="#ffa80e" />
        <stop offset=".611" stop-color="#ff9c10" />
        <stop offset=".658" stop-color="#ff9811" />
        <stop offset=".732" stop-color="#ff9a12" />
        <stop offset=".758" stop-color="#ffa118" />
        <stop offset=".777" stop-color="#ffac21" />
        <stop offset=".793" stop-color="#ffbd2e" />
        <stop offset=".806" stop-color="#ffd33f" />
        <stop offset=".809" stop-color="#ffda44" />
        <stop offset=".879" stop-color="#dda928" />
        <stop offset=".96" stop-color="#b8750b" />
        <stop offset="1" stop-color="#aa6100" />
    </linearGradient>
    <path
        d="M360.124 304h-224a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16z"
        fill="url(#f)"
    />
</svg>