IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

Archive icon - Gradient | SVG & PNG Free Download

Style Variants

Archive

Archive icon - also known as education, document, folder, office material, archive, school material, binder, 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/14/2025

Tags

office material

school material

files and folders

Usage Snippets

Archive.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="512"
    height="512"
    viewBox="0 0 512 512"
>
    <linearGradient id="lg1">
        <stop offset="0" stop-color="#ffd17e" />
        <stop offset="1" stop-color="#ffb739" />
    </linearGradient>
    <linearGradient
        id="SVGID_1_"
        gradientUnits="userSpaceOnUse"
        x1="74.981"
        x2="437.019"
        y1="74.981"
        y2="437.019"
        href="#lg1"
    />
    <linearGradient id="lg2">
        <stop offset="0" stop-color="#c0c8d2" />
        <stop offset="1" stop-color="#a6b0bd" />
    </linearGradient>
    <linearGradient
        id="SVGID_2_"
        gradientUnits="userSpaceOnUse"
        x1="102.805"
        x2="247.024"
        y1="374.77"
        y2="374.77"
        href="#lg2"
    />
    <linearGradient
        id="SVGID_3_"
        gradientUnits="userSpaceOnUse"
        x1="102.805"
        x2="247.024"
        y1="233.559"
        y2="233.559"
    >
        <stop offset="0" stop-color="#1e8aff" />
        <stop offset="1" stop-color="#0572eb" />
    </linearGradient>
    <linearGradient id="lg3">
        <stop offset="0" stop-color="#3d5168" />
        <stop offset="1" stop-color="#233952" />
    </linearGradient>
    <linearGradient
        id="SVGID_4_"
        gradientUnits="userSpaceOnUse"
        x1="147.985"
        x2="201.843"
        y1="310.456"
        y2="310.456"
        href="#lg3"
    />
    <linearGradient
        id="SVGID_5_"
        gradientUnits="userSpaceOnUse"
        x1="138.71"
        x2="211.119"
        y1="173.152"
        y2="173.152"
        href="#lg1"
    />
    <linearGradient id="lg4">
        <stop offset="0" stop-color="#fff" />
        <stop offset="1" stop-color="#edeff3" />
    </linearGradient>
    <linearGradient
        id="SVGID_6_"
        gradientUnits="userSpaceOnUse"
        x1="138.71"
        x2="211.119"
        y1="224.583"
        y2="224.583"
        href="#lg4"
    />
    <linearGradient
        id="SVGID_7_"
        gradientUnits="userSpaceOnUse"
        x1="264.976"
        x2="409.196"
        y1="374.77"
        y2="374.77"
        href="#lg2"
    />
    <linearGradient
        id="SVGID_8_"
        gradientUnits="userSpaceOnUse"
        x1="264.976"
        x2="409.196"
        y1="233.559"
        y2="233.559"
    >
        <stop offset="0" stop-color="#ff4e51" />
        <stop offset="1" stop-color="#f72553" />
    </linearGradient>
    <linearGradient
        id="SVGID_9_"
        gradientUnits="userSpaceOnUse"
        x1="310.157"
        x2="364.015"
        y1="310.456"
        y2="310.456"
        href="#lg3"
    />
    <linearGradient
        id="SVGID_10_"
        gradientUnits="userSpaceOnUse"
        x1="300.882"
        x2="373.29"
        y1="173.152"
        y2="173.152"
        href="#lg1"
    />
    <linearGradient
        id="SVGID_11_"
        gradientUnits="userSpaceOnUse"
        x1="300.882"
        x2="373.29"
        y1="224.583"
        y2="224.583"
        href="#lg4"
    />
    <g>
        <circle cx="256" cy="256" fill="url(#SVGID_1_)" r="256" />
        <g>
            <path
                d="m174.914 340.344-72.11 23.97v44.882h144.22v-44.882z"
                fill="url(#SVGID_2_)"
            />
            <path
                d="m102.804 102.804h144.219v261.51h-144.219z"
                fill="url(#SVGID_3_)"
            />
            <circle
                cx="174.914"
                cy="310.456"
                fill="url(#SVGID_4_)"
                r="26.929"
            />
            <path
                d="m211.118 138.71h-72.408v44.881l36.204 24.003 36.204-24.003z"
                fill="url(#SVGID_5_)"
            />
            <path
                d="m138.71 183.591h72.409v81.983h-72.409z"
                fill="url(#SVGID_6_)"
            />
            <path
                d="m337.086 340.344-72.11 23.97v44.882h144.219v-44.882z"
                fill="url(#SVGID_7_)"
            />
            <path
                d="m264.976 102.804h144.219v261.51h-144.219z"
                fill="url(#SVGID_8_)"
            />
            <circle
                cx="337.086"
                cy="310.456"
                fill="url(#SVGID_9_)"
                r="26.929"
            />
            <path
                d="m373.29 138.71h-72.408v44.881l36.204 24.003 36.204-24.003z"
                fill="url(#SVGID_10_)"
            />
            <path
                d="m300.882 183.591h72.409v81.983h-72.409z"
                fill="url(#SVGID_11_)"
            />
        </g>
    </g>
</svg>