SVG Sheets

by oduska

HTML

<svg class="mimetype-icons" xmlns="http://www.w3.org/2000/svg">
    <symbol id="disc-image">
        <path d="M24 4C12.954 4 4 12.955 4 24s8.954 20 20 20 20-8.955 20-20S35.046 4 24 4zm0 23.684c-2.035 0-3.684-1.649-3.684-3.684s1.649-3.684 3.684-3.684 3.684 1.649 3.684 3.684-1.649 3.684-3.684 3.684z" fill="#90caf9"/><g fill="#cfe8f9"><path d="M28.022 22.645l10.902-8.699c-1.326-1.963-3.033-3.645-5.008-4.955l-8.759 10.925c1.348.384 2.417 1.407 2.865 2.729zM19.934 25.214L8.999 33.927c1.333 2.008 3.057 3.734 5.065 5.068l8.665-10.946c-1.344-.426-2.39-1.484-2.795-2.835z"/></g><path d="M24 18c-3.314 0-6 2.688-6 6s2.686 6 6 6c3.313 0 6-2.688 6-6s-2.687-6-6-6zm0 8c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.896 2-2 2z" fill="#1e88e5"/>
    </symbol>
    
    <symbol id="archive">
        <path d="M8 3h32v42H8z" fill="#90caf9"/><path d="M22 21h4v2h-4zM22 15h4v2h-4zM22 18h4v2h-4zM22 24h4v2h-4zM22 9h4v2h-4zM22 3h4v2h-4zM22 6h4v2h-4zM22 12h4v2h-4z" fill="#1976d2"/><path d="M26 27h-4c0 3-2 6-2 8 0 2.210938 1.789063 4 4 4 2.210938 0 4-1.789062 4-4 0-2-2-5-2-8zm-2 10c-1.105469 0-2-.894531-2-2s.894531-2 2-2 2 .894531 2 2-.894531 2-2 2z" fill="#3f51b5"/>
    </symbol>
    
    <symbol id="video">
        <path d="M42 41V7H6v34zM12 18v4H8v-4zm0 8v4H8v-4zm0 8v4H8v-4zm0-24v4H8v-4zm28 8v4h-4v-4zm0 8v4h-4v-4zm0 8v4h-4v-4zm0-24v4h-4v-4z" fill="#3f51b5"/><path d="M30 24l-10-6v12z" fill="#fff"/>
    </symbol>
    
    <symbol id="folder">
        <path d="M40 12H22l-4-4H8c-2.199219 0-4 1.800781-4 4v8h40v-4c0-2.199219-1.800781-4-4-4z" fill="#ffa000"/><path d="M40 12H8c-2.199219 0-4 1.800781-4 4v20c0 2.199219 1.800781 4 4 4h32c2.199219 0 4-1.800781 4-4V16c0-2.199219-1.800781-4-4-4z" fill="#ffca28"/>
    </symbol>
</svg>

<svg class="customeyes-icon" viewBox="0 0 48 48">
    <use class="folder" xlink:href="#folder" />
</svg>

<svg class="customeyes-icon" viewBox="0 0 48 48">
    <use class="disc-image" xlink:href="#disc-image" />
</svg>

<svg class="customeyes-icon" viewBox="0 0 48 48">
   ...

CSS

svg {
    display: inline-block;
    width: 100%;
    max-width: 32px;
}

.mimetype-icons {
    display: none;
}

.customeyes-icon.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}