IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

File icon - Gradient | SVG & PNG Free Download

Style Variants

File

File icon - also known as file, sound, document, multimedia, archive, coding, and files and folders. Created in a clean gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.

7/24/2025

Tags

files and folders

Usage Snippets

File.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="512"
    height="512"
    viewBox="0 2 98 98"
>
    <linearGradient
        id="a"
        x1="49"
        x2="49"
        y1="95.5"
        y2="11.167"
        gradientTransform="matrix(1 0 0 -1 0 104)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#00efd1" />
        <stop offset="1" stop-color="#00acea" />
    </linearGradient>
    <path
        d="m82.1 35.5-24.3-23c-.6-.5-1.3-.8-2.1-.8H18c-1.7 0-3 1.3-3 3v76.6c0 1.7 1.3 3 3 3h62c1.7 0 3-1.3 3-3V37.7c0-.8-.3-1.6-.9-2.2zM58.7 21.7l13.8 13H58.7v-13zM21 88.3V17.7h31.7v20c0 1.7 1.3 3 3 3H77v47.6H21z"
        fill="url(#a)"
    />
    <linearGradient
        id="b"
        x1="62.931"
        x2="62.931"
        y1="95.5"
        y2="11.167"
        gradientTransform="matrix(1 0 0 -1 0 104)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#00efd1" />
        <stop offset="1" stop-color="#00acea" />
    </linearGradient>
    <path
        d="M61.6 54.1c-1.1-1.3-3-1.4-4.2-.4-1.3 1.1-1.4 3-.4 4.2l5.7 6.8-5.7 6.8c-1.1 1.3-.9 3.2.4 4.2.6.5 1.2.7 1.9.7.9 0 1.7-.4 2.3-1.1l7.3-8.7c.9-1.1.9-2.7 0-3.9l-7.3-8.6z"
        fill="url(#b)"
    />
    <linearGradient
        id="c"
        x1="35.069"
        x2="35.069"
        y1="95.5"
        y2="11.167"
        gradientTransform="matrix(1 0 0 -1 0 104)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#00efd1" />
        <stop offset="1" stop-color="#00acea" />
    </linearGradient>
    <path
        d="M40.6 53.7c-1.3-1.1-3.2-.9-4.2.4l-7.3 8.7c-.9 1.1-.9 2.7 0 3.9l7.3 8.7c.6.7 1.4 1.1 2.3 1.1.7 0 1.4-.2 1.9-.7 1.3-1.1 1.4-3 .4-4.2l-5.7-6.8L41 58c1.1-1.3.9-3.2-.4-4.3z"
        fill="url(#c)"
    />
    <linearGradient
        id="d"
        x1="49.091"
        x2="49.091"
        y1="95.5"
        y2="11.167"
        gradientTransform="matrix(1 0 0 -1 0 104)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#00efd1" />
        <stop offset="1" stop-color="#00acea" />
    </linearGradient>
    <path
        d="M51.7 47.2c-1.6-.2-3.2.9-3.4 2.5l-4.4 29c-.2 1.6.9 3.2 2.5 3.4h.5c1.5 0 2.7-1.1 3-2.5l4.4-29c.1-1.6-1-3.1-2.6-3.4z"
        fill="url(#d)"
    />
</svg>