IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

File icon - Flat Gradient | SVG & PNG Free Download

Style Variants

File

Communication And Network 8

File icon - also known as file, document, connection, networking, archive, data storage, shared folder, and files and folders. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.

7/14/2025

Tags

files and folders

Usage Snippets

File.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="512"
    height="512"
    viewBox="0 0 32 32"
>
    <linearGradient
        id="b"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="rotate(90 4.173 8.378) scale(2.455)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#f37021" />
        <stop offset="1" stop-color="#ff5003" />
    </linearGradient>
    <linearGradient
        id="c"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="rotate(90 9.662 13.088) scale(4.075)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#f99f1b" />
        <stop offset="1" stop-color="#ce7500" />
    </linearGradient>
    <linearGradient
        id="d"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="rotate(90 1.919 14.581) scale(7.338)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#fed54f" />
        <stop offset="1" stop-color="#e3b900" />
    </linearGradient>
    <linearGradient id="a">
        <stop offset="0" stop-color="#2196f3" />
        <stop offset="1" stop-color="#005faa" />
    </linearGradient>
    <linearGradient
        id="e"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="matrix(0 2.863 -2.863 0 16 25)"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <linearGradient
        id="f"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="matrix(-3.838 0 0 -3.838 21 28.307)"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <linearGradient
        id="g"
        x1="11.5"
        x2="14.5"
        y1="28.507"
        y2="28.507"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <linearGradient
        id="h"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="rotate(90 -1.518 18.018) scale(11.295)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#fcb215" />
        <stop offset="1" stop-color="#cc8900" />
    </linearGradient>
    <linearGradient
        id="i"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="matrix(0 5.292 -5.292 0 16 29.208)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#455a63" />
        <stop offset="1" stop-color="#18313c" />
    </linearGradient>
    <g fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
        <path
            fill="url(#b)"
            d="M16.811 5.217c.085-.421.257-.819.505-1.17a.75.75 0 0 0-.612-1.183H9.878c-.886 0-1.733.298-2.36.814-.683.564-1.052 1.335-1.052 2.132 0 .702.75.766.75.766h9.24s.633-.986.355-1.359z"
        />
        <path
            fill="url(#c)"
            d="M28.828 4a2.75 2.75 0 0 0-2.75-2.75h-6.254a4.574 4.574 0 0 0-4.574 4.574c0 .542.75.752.75.752h12.078a.75.75 0 0 0 .75-.75z"
        />
        <path
            fill="url(#d)"
            d="M28.828 5.826a.749.749 0 0 0-.75-.75H5.922a2.749 2.749 0 0 0-2.75 2.75v12.438a2.749 2.749 0 0 0 2.75 2.75h20.156a2.749 2.749 0 0 0 2.75-2.75V5.826z"
        />
        <path
            fill="url(#e)"
            d="M15.25 22.291v4.322a.75.75 0 0 0 1.5 0v-4.322a.75.75 0 0 0-1.5 0z"
        />
        <path
            fill="url(#f)"
            d="M18.648 29.057h10.719a.75.75 0 0 0 0-1.5H18.648a.75.75 0 0 0 0 1.5z"
        />
        <path
            fill="url(#g)"
            d="M2.633 29.057h10.668a.75.75 0 0 0 0-1.5H2.633a.75.75 0 0 0 0 1.5z"
        />
        <path
            fill="url(#h)"
            d="M28.828 16.589H3.172v3.675a2.749 2.749 0 0 0 2.75 2.75h20.156a2.749 2.749 0 0 0 2.75-2.75z"
        />
        <path
            fill="url(#i)"
            d="M19.398 27.613a1.75 1.75 0 0 0-1.75-1.75h-3.347a1.75 1.75 0 0 0-1.75 1.75V29c0 .966.783 1.75 1.75 1.75h3.347a1.75 1.75 0 0 0 1.75-1.75z"
        />
    </g>
</svg>