IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

Add File icon - Flat Gradient | SVG & PNG Free Download

Style Variants

Add File

File And Document 107

Add File icon - also known as interface, document, plus, paper, page, archive, add file, and files and folders. Created in a clean flat gradient style with a silver finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.

7/15/2025

Tags

files and folders

Usage Snippets

AddFile.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="512"
    height="512"
    viewBox="0 0 500 500"
>
    <linearGradient
        id="a"
        x1=".5"
        x2=".5"
        y1="499.99"
        y2="499"
        gradientTransform="matrix(333.33 0 0 -437.5 52.08 218770.83)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#eaecf7" />
        <stop offset="1" stop-color="#cdd3f1" />
    </linearGradient>
    <linearGradient
        id="b"
        x1=".5"
        x2=".5"
        y1="499.83"
        y2="498.97"
        gradientTransform="matrix(333.33 0 0 -83.33 52.08 42041.67)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#e2e5f4" stop-opacity="0" />
        <stop offset="1" stop-color="#9aa6e2" />
    </linearGradient>
    <linearGradient
        id="c"
        x1=".16"
        x2=".9"
        y1="499.85"
        y2="499.09"
        gradientTransform="matrix(187.5 0 0 -187.5 260.42 94041.67)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#36db39" />
        <stop offset="1" stop-color="#20b823" />
    </linearGradient>
    <linearGradient
        id="d"
        x1=".26"
        x2=".77"
        y1="499.95"
        y2="498.99"
        gradientTransform="matrix(104.17 0 0 -104.17 302.08 52416.66)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#20b823" />
        <stop offset="1" stop-color="#36db39" stop-opacity="0" />
    </linearGradient>
    <linearGradient
        id="e"
        x1=".15"
        x2=".86"
        y1="499.92"
        y2="499.06"
        gradientTransform="matrix(83.33 0 0 -83.33 312.5 42010.42)"
        href="#a"
    />
    <g>
        <path
            fill="url(#a)"
            d="M364.58 458.33H72.92a20.89 20.89 0 0 1-20.84-20.83V41.67a20.89 20.89 0 0 1 20.84-20.84h250V62.5a20.89 20.89 0 0 0 20.83 20.83h41.67V437.5a20.89 20.89 0 0 1-20.84 20.83z"
        />
        <path
            fill="url(#b)"
            d="M52.08 375v62.5a20.89 20.89 0 0 0 20.83 20.83h291.67a20.89 20.89 0 0 0 20.83-20.83V375z"
        />
        <path
            fill="#9aa6e2"
            d="M385.42 83.33h-41.67a20.89 20.89 0 0 1-20.83-20.83V20.83z"
        />
        <circle cx="354.17" cy="385.42" r="93.75" fill="url(#c)" />
        <path
            fill="url(#d)"
            d="M354.17 437.5a20.89 20.89 0 0 1-20.83-20.83v-10.42h-10.42a20.83 20.83 0 1 1 0-41.67h10.42v-10.41a20.83 20.83 0 1 1 41.67 0v10.42h10.42a20.83 20.83 0 0 1 0 41.67H375v10.42a20.89 20.89 0 0 1-20.83 20.82z"
        />
        <g fill="#9aa6e2">
            <path
                d="M218.75 156.25H125c-6.25 0-10.42-4.17-10.42-10.42s4.17-10.42 10.42-10.42h93.75c6.25 0 10.42 4.17 10.42 10.42s-4.17 10.42-10.42 10.42zM312.5 208.33H125c-6.25 0-10.42-4.17-10.42-10.42s4.17-10.41 10.42-10.41h187.5c6.25 0 10.42 4.17 10.42 10.42s-4.17 10.41-10.42 10.41zM270.83 260.42H125c-6.25 0-10.42-4.17-10.42-10.42s4.17-10.42 10.42-10.42h145.83c6.25 0 10.42 4.17 10.42 10.42s-4.17 10.42-10.42 10.42z"
            />
        </g>
        <path
            fill="url(#e)"
            d="M385.42 375h-20.84v-20.83c0-6.25-4.17-10.42-10.42-10.42s-10.42 4.17-10.42 10.42V375h-20.82c-6.25 0-10.42 4.17-10.42 10.42s4.17 10.42 10.42 10.42h20.83v20.83c0 6.25 4.17 10.42 10.42 10.42s10.42-4.17 10.42-10.42v-20.84h20.83c6.25 0 10.42-4.17 10.42-10.42S391.67 375 385.42 375z"
        />
    </g>
</svg>