IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

List icon - Flat Gradient | SVG & PNG Free Download

Style Variants

List

User Interface 1750

List icon - also known as criteria, list, menu, ui, setup, options, listing, checklist, categories, bullet point, and list option. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.

7/15/2025

Tags

Usage Snippets

List.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="512"
    height="512"
    viewBox="0 0 64 64"
>
    <linearGradient
        id="b"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="matrix(0 56 -56 0 224 452)"
        gradientUnits="userSpaceOnUse"
    >
        <stop offset="0" stop-color="#dedbd7" />
        <stop offset="1" stop-color="#b8b5b2" />
    </linearGradient>
    <linearGradient id="a">
        <stop offset="0" stop-color="#b8b5b2" />
        <stop offset="1" stop-color="#8f8d8b" />
    </linearGradient>
    <linearGradient
        id="c"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="matrix(0 8 -8 0 212 460)"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <linearGradient
        id="d"
        x1="0"
        x2="1"
        y1="0"
        y2="0"
        gradientTransform="matrix(0 4 -4 0 230 462)"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <g fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
        <path
            fill="url(#b)"
            d="M248 456a4 4 0 0 0-4-4h-40a4 4 0 0 0-4 4v48a4 4 0 0 0 4 4h40a4 4 0 0 0 4-4v-48z"
            transform="translate(-192 -448)"
        />
        <circle
            cx="212"
            cy="464"
            r="4"
            fill="url(#c)"
            transform="translate(-192 -450)"
        />
        <circle
            cx="212"
            cy="464"
            r="4"
            fill="url(#c)"
            transform="translate(-192 -438)"
        />
        <circle
            cx="212"
            cy="464"
            r="4"
            fill="url(#c)"
            transform="translate(-192 -426)"
        />
        <circle
            cx="212"
            cy="464"
            r="4"
            fill="url(#c)"
            transform="translate(-192 -414)"
        />
        <path
            fill="url(#d)"
            d="M240 464a2 2 0 0 0-2-2h-16a2 2 0 0 0 0 4h16a2 2 0 0 0 2-2z"
            transform="translate(-192 -450)"
        />
        <path
            fill="url(#d)"
            d="M240 464a2 2 0 0 0-2-2h-16a2 2 0 0 0 0 4h16a2 2 0 0 0 2-2z"
            transform="translate(-192 -438)"
        />
        <path
            fill="url(#d)"
            d="M240 464a2 2 0 0 0-2-2h-16a2 2 0 0 0 0 4h16a2 2 0 0 0 2-2z"
            transform="translate(-192 -426)"
        />
        <path
            fill="url(#d)"
            d="M240 464a2 2 0 0 0-2-2h-16a2 2 0 0 0 0 4h16a2 2 0 0 0 2-2z"
            transform="translate(-192 -414)"
        />
    </g>
</svg>