IconHubDesign System

Collections

Empty Collection

Add icons to this collection by clicking the heart icon.

Folder icon - Outline Color | SVG & PNG Free Download

Style Variants

Folder

Graphic Design 406

Folder icon - also known as folder, archive, file storage, data storage, ui, and files and folders. Created in a clean outline color style with a white, black, and navy 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

Folder.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="512"
    height="512"
    viewBox="0 0 24 24"
>
    <symbol id="c" viewBox="0 -48 48 48">
        <g clip-path="url(#a)">
            <g
                fill="none"
                stroke="#000"
                stroke-miterlimit="10"
                stroke-width=".25"
            >
                <path
                    d="M2-48V0M4-48V0M6-48V0M8-48V0M10-48V0M12-48V0M14-48V0M16-48V0M18-48V0M20-48V0M22-48V0M24-48V0M26-48V0M28-48V0M30-48V0M32-48V0M34-48V0M36-48V0M38-48V0M40-48V0M42-48V0M44-48V0M46-48V0"
                />
            </g>
            <g
                fill="none"
                stroke="#000"
                stroke-miterlimit="10"
                stroke-width=".25"
            >
                <path
                    d="M0-2h48M0-4h48M0-6h48M0-8h48M0-10h48M0-12h48M0-14h48M0-16h48M0-18h48M0-20h48M0-22h48M0-24h48M0-26h48M0-28h48M0-30h48M0-32h48M0-34h48M0-36h48M0-38h48M0-40h48M0-42h48M0-44h48M0-46h48"
                />
            </g>
            <path d="M47.75-.25v-47.5H.25v47.5h47.5M48 0H0v-48h48z" />
        </g>
    </symbol>
    <clipPath id="a"><path d="M0-48h48V0H0z" /></clipPath>
    <symbol id="d" viewBox="0 -48 48 48">
        <g opacity=".4">
            <path
                fill="none"
                stroke="#000"
                stroke-miterlimit="10"
                stroke-width=".25"
                d="M24 0v-48M48-24H0M48-16H0M48-32H0M32-48V0M16-48V0M47.75-.25.25-47.75M.25-.25l47.5-47.5M24-14c-5.522 0-10-4.477-10-10 0-5.522 4.478-10 10-10 5.523 0 10 4.478 10 10 0 5.523-4.477 10-10 10z"
                clip-path="url(#b)"
            />
            <path
                fill="none"
                stroke="#000"
                stroke-miterlimit="10"
                stroke-width=".25"
                d="M24-4C12.946-4 4-12.947 4-24s8.946-20 20-20c11.053 0 20 8.947 20 20 0 11.052-8.948 20-20 20z"
                clip-path="url(#b)"
            />
            <path
                fill="none"
                stroke="#000"
                stroke-miterlimit="10"
                stroke-width=".25"
                d="M38-6H10c-2.211 0-4-1.791-4-4v-28c0-2.21 1.789-4 4-4h28c2.21 0 4 1.79 4 4v28c0 2.209-1.79 4-4 4z"
                clip-path="url(#b)"
            />
            <path
                fill="none"
                stroke="#000"
                stroke-miterlimit="10"
                stroke-width=".25"
                d="M40-8H8a4 4 0 0 1-4-4v-24a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v24a4 4 0 0 1-4 4z"
                clip-path="url(#b)"
            />
            <path
                fill="none"
                stroke="#000"
                stroke-miterlimit="10"
                stroke-width=".25"
                d="M40-40v32a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-32a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4z"
                clip-path="url(#b)"
            />
            <g clip-path="url(#b)">
                <path d="M47.75-.25v-47.5H.25v47.5h47.5M48 0H0v-48h48z" />
            </g>
        </g>
    </symbol>
    <clipPath id="b"><path d="M0-48h48V0H0z" /></clipPath>
    <path fill="#fff" d="M3 17.5h18V19H3zM8.22 5H4v2h4.72z" />
    <path fill="#023e8a" d="M3 8h18v8.5H3z" />
    <path
        fill="#001e30"
        d="M21.3 7H9.75l-.617-2.47a.7.7 0 0 0-.68-.53H3.7a.7.7 0 0 0-.7.7V7h-.3a.7.7 0 0 0-.7.7v11.6a.7.7 0 0 0 .7.7h18.6a.7.7 0 0 0 .7-.7V7.7a.7.7 0 0 0-.7-.7zM4 5h4.22l.5 2H4zm17 14H3v-1.5h18zm0-2.5H3V8h18z"
    />
</svg>