module-generic

Introduced in v2.0.2
Available in TYPO3 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="#666" d="M0 0h64v64H0z"/><g><g><path fill="#FFF" d="M48.9 19.4V19c0-.2 0-.3-.1-.5 0-.1-.1-.2-.1-.3 0-.1 0-.1-.1-.2s-.1-.2-.2-.3v-.1c-.4-.6-1.1-1.1-2-1.5-1.8-.8-4.5-1.1-7.3-1.2h-1.2c-.7 0-1.3 0-1.8.2-.2 0-.3.1-.5.2-.1.1-.3.2-.4.3-.1.1-.2.2-.3.4-.2.4-.3.9-.3 1.7 0 1.1.2 2.5.6 4 .2.7.4 1.4.7 2.2.5 1.3 1.1 2.7 1.7 3.9.2.3.3.6.5.9.2.3.3.6.5.8.4.6.8 1.1 1.2 1.6.9 1 1.9 1.7 2.8 1.7 1.5 0 3.8-3.7 5.1-8.1.8-1.8 1.1-3.6 1.2-5.3zM37.1 17l-.4.4V17h.4zm-.1 2.9 2.9-2.9c1 0 1.8.1 2.6.2l-5 5c-.2-.8-.4-1.5-.5-2.3zm2.1 6.2c-.3-.6-.6-1.2-.8-1.8l6.6-6.6c1.1.3 1.6.7 1.9.9l-7.6 7.6s0-.1-.1-.1zm1.1 1.9 6.4-6.4c-.2 1.4-.6 2.7-1.1 3.9l-4.1 4.1c-.3-.4-.7-.9-1.2-1.6z"/></g><g><path fill="#FFF" d="M39.2 38.6c-.1 0-.3 0-.4-.1-.1 0-.3-.1-.4-.2-.5-.2-1.1-.6-1.6-1.2-.2-.2-.4-.4-.6-.7 0 0 0-.1-.1-.1-.2-.2-.4-.5-.6-.8-.4-.5-.8-1.1-1.1-1.7-.4-.6-.7-1.2-1-1.8-.3-.6-.6-1.2-1-1.9-.3-.6-.6-1.3-.9-1.9-.3-.7-.6-1.3-.8-2-.3-.7-.5-1.4-.7-2.1-.2-.8-.5-1.5-.7-2.2l-.3-1.2c-.1-.4-.1-.8-.2-1.1-.1-.5-.1-1-.1-1.4 0-.6 0-1.1.1-1.5.1-.4.2-.7.3-.9.1-.1.1-.2.2-.3.1-.1.2-.1.3-.2-.4 0-.8.1-1.3.2h-.2c-.4.1-.8.1-1.2.2-1.6.3-3.3.7-4.8 1.2H22c-.4.1-.7.2-1 .4h-.1c-2.2.8-4 1.8-4.9 3-.3.5-.6 1.2-.7 2v.8c0 1.7.4 3.8 1 6.1.9 3.2 2.4 6.8 4.1 10 .3.6.7 1.2 1 1.8 1.1 1.9 2.3 3.6 3.5 4.9.2.3.5.5.7.7.2.2.5.4.7.6.8.7 1.6 1.1 2.4 1.3h.1c.2 0 .5.1.7.1.2 0 .4 0 .7-.1h.1c.2-.1.5-.1.7-.2 2.5-1 5.8-4.4 8.8-8.8.3-.5.6-1 .9-1.4-.6.4-1 .5-1.5.5zm-11-12.7-8.3 8.3c-.3-.7-.6-1.4-.8-2l8.4-8.4c.2.6.5 1.4.7 2.1zm-11.1-2.6v-.5l2.7-2.7c1.2-.6 2.7-1.1 4.4-1.5l-6.9 6.9c-.1-.8-.2-1.5-.2-2.2zm9.4-4.2c.1.7.2 1.5.4 2.4L18.4 30c-.2-.8-.4-1.5-.6-2.2l8.7-8.7zm-5.7 17L29 28c.3.7.5 1.3.8 2l-8.1 8c-.3-.6-.6-1.2-.9-1.9zm9.9-4.2c.3.6.6 1.3 1 1.9l-7.9 7.9c-.4-.5-.7-1.1-1.1-1.8l8-8zm-5.8 11.4 7.8-7.8c.4.6.8 1.1 1.2 1.7l-7.7 7.7c-.4-.5-.8-1-1.3-1.6zm10.4-4.7c.5.5 1 .9 1.6 1.3L29.7 47h-.3c-.4 0-1-.3-1.7-.8l7.6-7.6z"/></g></g></svg>

Inline

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="#666" d="M0 0h64v64H0z"/><g><g><path fill="#FFF" d="M48.9 19.4V19c0-.2 0-.3-.1-.5 0-.1-.1-.2-.1-.3 0-.1 0-.1-.1-.2s-.1-.2-.2-.3v-.1c-.4-.6-1.1-1.1-2-1.5-1.8-.8-4.5-1.1-7.3-1.2h-1.2c-.7 0-1.3 0-1.8.2-.2 0-.3.1-.5.2-.1.1-.3.2-.4.3-.1.1-.2.2-.3.4-.2.4-.3.9-.3 1.7 0 1.1.2 2.5.6 4 .2.7.4 1.4.7 2.2.5 1.3 1.1 2.7 1.7 3.9.2.3.3.6.5.9.2.3.3.6.5.8.4.6.8 1.1 1.2 1.6.9 1 1.9 1.7 2.8 1.7 1.5 0 3.8-3.7 5.1-8.1.8-1.8 1.1-3.6 1.2-5.3zM37.1 17l-.4.4V17h.4zm-.1 2.9 2.9-2.9c1 0 1.8.1 2.6.2l-5 5c-.2-.8-.4-1.5-.5-2.3zm2.1 6.2c-.3-.6-.6-1.2-.8-1.8l6.6-6.6c1.1.3 1.6.7 1.9.9l-7.6 7.6s0-.1-.1-.1zm1.1 1.9 6.4-6.4c-.2 1.4-.6 2.7-1.1 3.9l-4.1 4.1c-.3-.4-.7-.9-1.2-1.6z"/></g><g><path fill="#FFF" d="M39.2 38.6c-.1 0-.3 0-.4-.1-.1 0-.3-.1-.4-.2-.5-.2-1.1-.6-1.6-1.2-.2-.2-.4-.4-.6-.7 0 0 0-.1-.1-.1-.2-.2-.4-.5-.6-.8-.4-.5-.8-1.1-1.1-1.7-.4-.6-.7-1.2-1-1.8-.3-.6-.6-1.2-1-1.9-.3-.6-.6-1.3-.9-1.9-.3-.7-.6-1.3-.8-2-.3-.7-.5-1.4-.7-2.1-.2-.8-.5-1.5-.7-2.2l-.3-1.2c-.1-.4-.1-.8-.2-1.1-.1-.5-.1-1-.1-1.4 0-.6 0-1.1.1-1.5.1-.4.2-.7.3-.9.1-.1.1-.2.2-.3.1-.1.2-.1.3-.2-.4 0-.8.1-1.3.2h-.2c-.4.1-.8.1-1.2.2-1.6.3-3.3.7-4.8 1.2H22c-.4.1-.7.2-1 .4h-.1c-2.2.8-4 1.8-4.9 3-.3.5-.6 1.2-.7 2v.8c0 1.7.4 3.8 1 6.1.9 3.2 2.4 6.8 4.1 10 .3.6.7 1.2 1 1.8 1.1 1.9 2.3 3.6 3.5 4.9.2.3.5.5.7.7.2.2.5.4.7.6.8.7 1.6 1.1 2.4 1.3h.1c.2 0 .5.1.7.1.2 0 .4 0 .7-.1h.1c.2-.1.5-.1.7-.2 2.5-1 5.8-4.4 8.8-8.8.3-.5.6-1 .9-1.4-.6.4-1 .5-1.5.5zm-11-12.7-8.3 8.3c-.3-.7-.6-1.4-.8-2l8.4-8.4c.2.6.5 1.4.7 2.1zm-11.1-2.6v-.5l2.7-2.7c1.2-.6 2.7-1.1 4.4-1.5l-6.9 6.9c-.1-.8-.2-1.5-.2-2.2zm9.4-4.2c.1.7.2 1.5.4 2.4L18.4 30c-.2-.8-.4-1.5-.6-2.2l8.7-8.7zm-5.7 17L29 28c.3.7.5 1.3.8 2l-8.1 8c-.3-.6-.6-1.2-.9-1.9zm9.9-4.2c.3.6.6 1.3 1 1.9l-7.9 7.9c-.4-.5-.7-1.1-1.1-1.8l8-8zm-5.8 11.4 7.8-7.8c.4.6.8 1.1 1.2 1.7l-7.7 7.7c-.4-.5-.8-1-1.3-1.6zm10.4-4.7c.5.5 1 .9 1.6 1.3L29.7 47h-.3c-.4 0-1-.3-1.7-.8l7.6-7.6z"/></g></g></svg>
    </span>
</span>

Sprite

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg role="img"><use xlink:href="dist/sprites/module.svg#module-generic" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-generic" size="small" />

CSS Background Image

.myclass {
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3cpath fill='%23666' d='M0 0h64v64H0z'/%3e%3cg%3e%3cg%3e%3cpath fill='%23FFF' d='M48.9 19.4V19c0-.2 0-.3-.1-.5 0-.1-.1-.2-.1-.3 0-.1 0-.1-.1-.2s-.1-.2-.2-.3v-.1c-.4-.6-1.1-1.1-2-1.5-1.8-.8-4.5-1.1-7.3-1.2h-1.2c-.7 0-1.3 0-1.8.2-.2 0-.3.1-.5.2-.1.1-.3.2-.4.3-.1.1-.2.2-.3.4-.2.4-.3.9-.3 1.7 0 1.1.2 2.5.6 4 .2.7.4 1.4.7 2.2.5 1.3 1.1 2.7 1.7 3.9.2.3.3.6.5.9.2.3.3.6.5.8.4.6.8 1.1 1.2 1.6.9 1 1.9 1.7 2.8 1.7 1.5 0 3.8-3.7 5.1-8.1.8-1.8 1.1-3.6 1.2-5.3zM37.1 17l-.4.4V17h.4zm-.1 2.9 2.9-2.9c1 0 1.8.1 2.6.2l-5 5c-.2-.8-.4-1.5-.5-2.3zm2.1 6.2c-.3-.6-.6-1.2-.8-1.8l6.6-6.6c1.1.3 1.6.7 1.9.9l-7.6 7.6s0-.1-.1-.1zm1.1 1.9 6.4-6.4c-.2 1.4-.6 2.7-1.1 3.9l-4.1 4.1c-.3-.4-.7-.9-1.2-1.6z'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23FFF' d='M39.2 38.6c-.1 0-.3 0-.4-.1-.1 0-.3-.1-.4-.2-.5-.2-1.1-.6-1.6-1.2-.2-.2-.4-.4-.6-.7 0 0 0-.1-.1-.1-.2-.2-.4-.5-.6-.8-.4-.5-.8-1.1-1.1-1.7-.4-.6-.7-1.2-1-1.8-.3-.6-.6-1.2-1-1.9-.3-.6-.6-1.3-.9-1.9-.3-.7-.6-1.3-.8-2-.3-.7-.5-1.4-.7-2.1-.2-.8-.5-1.5-.7-2.2l-.3-1.2c-.1-.4-.1-.8-.2-1.1-.1-.5-.1-1-.1-1.4 0-.6 0-1.1.1-1.5.1-.4.2-.7.3-.9.1-.1.1-.2.2-.3.1-.1.2-.1.3-.2-.4 0-.8.1-1.3.2h-.2c-.4.1-.8.1-1.2.2-1.6.3-3.3.7-4.8 1.2H22c-.4.1-.7.2-1 .4h-.1c-2.2.8-4 1.8-4.9 3-.3.5-.6 1.2-.7 2v.8c0 1.7.4 3.8 1 6.1.9 3.2 2.4 6.8 4.1 10 .3.6.7 1.2 1 1.8 1.1 1.9 2.3 3.6 3.5 4.9.2.3.5.5.7.7.2.2.5.4.7.6.8.7 1.6 1.1 2.4 1.3h.1c.2 0 .5.1.7.1.2 0 .4 0 .7-.1h.1c.2-.1.5-.1.7-.2 2.5-1 5.8-4.4 8.8-8.8.3-.5.6-1 .9-1.4-.6.4-1 .5-1.5.5zm-11-12.7-8.3 8.3c-.3-.7-.6-1.4-.8-2l8.4-8.4c.2.6.5 1.4.7 2.1zm-11.1-2.6v-.5l2.7-2.7c1.2-.6 2.7-1.1 4.4-1.5l-6.9 6.9c-.1-.8-.2-1.5-.2-2.2zm9.4-4.2c.1.7.2 1.5.4 2.4L18.4 30c-.2-.8-.4-1.5-.6-2.2l8.7-8.7zm-5.7 17L29 28c.3.7.5 1.3.8 2l-8.1 8c-.3-.6-.6-1.2-.9-1.9zm9.9-4.2c.3.6.6 1.3 1 1.9l-7.9 7.9c-.4-.5-.7-1.1-1.1-1.8l8-8zm-5.8 11.4 7.8-7.8c.4.6.8 1.1 1.2 1.7l-7.7 7.7c-.4-.5-.8-1-1.3-1.6zm10.4-4.7c.5.5 1 .9 1.6 1.3L29.7 47h-.3c-.4 0-1-.3-1.7-.8l7.6-7.6z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

@import "@typo3/icons/dist/icons.scss";
@import "@typo3/icons/dist/scss/icons-variables-module.scss";

.myclass {
    background-size: 1em 1em;
    background-image: $icon-module-generic;
}

Download

Download