IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

Css icon - Lineal Gradient | SVG & PNG Free Download

Style Variants

Css

File And Folder 6

Css icon - also known as interface, file, document, format, extension, archive, css, 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

files and folders

Usage Snippets

Css.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="100"
    height="100"
    viewBox="0 0 496 496"
>
    <linearGradient
        id="a"
        x1="-46.277"
        x2="21.072"
        y1="567.224"
        y2="634.57"
        gradientTransform="matrix(8 0 0 -8 371 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#003f8a" />
        <stop offset=".518" stop-color="#00d7df" />
        <stop offset="1" stop-color="#006df0" />
    </linearGradient>
    <path
        d="M388 440a8 8 0 0 0-8 8v32H76V16h224v72a8 8 0 0 0 8 8h72v136a8 8 0 0 0 16 0V88.4a6.002 6.002 0 0 0-.088-.64 7.894 7.894 0 0 0-2.256-5.416l-79.904-80a8.091 8.091 0 0 0-.696-.464 8.012 8.012 0 0 0-1.6-1.08 7.76 7.76 0 0 0-.912-.32 7.962 7.962 0 0 0-1.968-.392C308.36.096 308.184 0 308 0H68a8 8 0 0 0-8 8v480a8 8 0 0 0 8 8h320a8 8 0 0 0 8-8v-40a8 8 0 0 0-8-8zM316 27.32 368.368 80H316V27.32z"
        fill="url(#a)"
    />
    <linearGradient
        id="b"
        x1="-35.028"
        x2="32.325"
        y1="555.975"
        y2="623.321"
        gradientTransform="matrix(8 0 0 -8 371 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#003f8a" />
        <stop offset=".518" stop-color="#00d7df" />
        <stop offset="1" stop-color="#006df0" />
    </linearGradient>
    <path
        d="M428 256H204a8 8 0 0 0-8 8v152a8 8 0 0 0 8 8h224a8 8 0 0 0 8-8V264a8 8 0 0 0-8-8zm-8 152H212V272h208v136z"
        fill="url(#b)"
    />
    <linearGradient
        id="c"
        x1="-39.028"
        x2="28.325"
        y1="559.975"
        y2="627.321"
        gradientTransform="matrix(8 0 0 -8 371 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#003f8a" />
        <stop offset=".518" stop-color="#00d7df" />
        <stop offset="1" stop-color="#006df0" />
    </linearGradient>
    <path
        d="M236 392h32a8 8 0 0 0 0-16h-24v-72h24a8 8 0 0 0 0-16h-32a8 8 0 0 0-8 8v88a8 8 0 0 0 8 8z"
        fill="url(#c)"
    />
    <linearGradient
        id="d"
        x1="-35.028"
        x2="32.325"
        y1="555.975"
        y2="623.321"
        gradientTransform="matrix(8 0 0 -8 371 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#003f8a" />
        <stop offset=".518" stop-color="#00d7df" />
        <stop offset="1" stop-color="#006df0" />
    </linearGradient>
    <path
        d="M300 376a8 8 0 0 0 0 16h32a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8h-24v-24h24a8 8 0 0 0 0-16h-32a8 8 0 0 0-8 8v40a8 8 0 0 0 8 8h24v32h-24z"
        fill="url(#d)"
    />
    <linearGradient
        id="e"
        x1="-31.028"
        x2="36.325"
        y1="551.975"
        y2="619.321"
        gradientTransform="matrix(8 0 0 -8 371 5013)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#003f8a" />
        <stop offset=".518" stop-color="#00d7df" />
        <stop offset="1" stop-color="#006df0" />
    </linearGradient>
    <path
        d="M364 376a8 8 0 0 0 0 16h32a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8h-24v-24h24a8 8 0 0 0 0-16h-32a8 8 0 0 0-8 8v40a8 8 0 0 0 8 8h24v32h-24z"
        fill="url(#e)"
    />
</svg>