Table with Icons

<!DOCTYPE html>
<title>My Example</title>

/* Container for icon and text */
.file-info {
    display: flex;
    align-items: center;
}
/* General Icon Styling */
.file-info .icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0; /* Prevents icon from shrinking if filename is long */
}
.file-info .icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Icon specific colors (optional) */
.icon-pdf { color: #d32f2f; }
.icon-zip { color: #f57c00; }
.icon-doc { color: #1976d2; }
.icon-img { color: #388e3c; }

</style>

<table class="icon-table">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Size</th>
            <th scope="col">Last Modified</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="file-info">
                    <span class="icon icon-pdf">
                        
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9.5 14.5v-1H11v.5h2v-1h-2.5c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1.5c0 .83-.67 1.5-1.5 1.5H9.5zM16 11.5h-2v-1h2v1zm-5.5 0H9v-1h1.5v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"></path></svg>
                    </span>
                    Annual-Report-2025.pdf
                </div>
            </td>
            <td>2.5 MB</td>
            <td>Aug 15, 2025</td>
        </tr>
        <tr>
            <td>
                <div class="file-info">
                    <span class="icon icon-zip">
                         
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-2 6h-2v2h2v2h-2v2h-2v-2h2v-2h-2v-2h-2v2h-2v-2h2v-2h-2v-2h2v2h2v2h2v-2h2v2z"></path></svg>
                    </span>
                    Brand-Assets.zip
                </div>
            </td>
            <td>15.2 MB</td>
            <td>Aug 12, 2025</td>
        </tr>
        <tr>
            <td>
                <div class="file-info">
                    <span class="icon icon-doc">
                        
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"></path></svg>
                    </span>
                    Meeting-Notes-Q3.docx
                </div>
            </td>
            <td>128 KB</td>
            <td>Aug 10, 2025</td>
        </tr>
        <tr>
            <td>
                <div class="file-info">
                    <span class="icon icon-img">
                         
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></svg>
                    </span>
                    Website-Mockup-v3.png
                </div>
            </td>
            <td>850 KB</td>
            <td>Aug 09, 2025</td>
        </tr>
    </tbody>
</table>