modulegroup-system

Introduced in v1.10.0
Available in TYPO3 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><path d="m46.629 35.2-1.943-1.143c.114-.686.229-1.371.229-2.057 0-.686-.114-1.371-.229-2.057l1.943-1.143c1.143-.686 1.486-2.057.8-3.086l-2.286-4c-.686-1.143-2.057-1.486-3.086-.8l-1.943 1.143c-1.029-.914-2.286-1.6-3.543-2.057v-1.714A2.293 2.293 0 0 0 34.285 16h-4.571a2.293 2.293 0 0 0-2.286 2.286V20c-1.257.457-2.514 1.143-3.543 2.057l-1.943-1.143a2.216 2.216 0 0 0-3.086.8l-2.286 4a2.216 2.216 0 0 0 .8 3.086l1.943 1.143c-.113.686-.227 1.371-.227 2.057 0 .686.114 1.371.229 2.057L17.371 35.2c-1.143.686-1.486 2.057-.8 3.086l2.286 4c.686 1.143 2.057 1.486 3.086.8l1.943-1.143c1.029.914 2.286 1.6 3.543 2.057v1.714A2.293 2.293 0 0 0 29.715 48h4.571a2.293 2.293 0 0 0 2.286-2.286V44c1.257-.457 2.514-1.143 3.543-2.057l1.943 1.143a2.216 2.216 0 0 0 3.086-.8l2.286-4c.684-1.029.341-2.515-.801-3.086zM43.2 41.143l-3.429-2.057c-1.486 1.6-3.314 2.743-5.486 3.2v3.429h-4.571v-3.429c-2.171-.457-4-1.6-5.486-3.2L20.8 41.143l-2.286-4 3.429-2.057c-.343-1.029-.571-2.057-.571-3.2s.229-2.171.571-3.2l-3.429-2.057 2.286-4 3.429 2.057c1.486-1.6 3.314-2.743 5.486-3.2v-3.429h4.571v3.429c2.171.457 4 1.6 5.486 3.2l3.429-2.057 2.286 4-3.429 2.057c.343 1.029.571 2.057.571 3.2s-.229 2.171-.571 3.2l3.429 2.057-2.287 4z"/><path d="M32 27.2c2.629 0 4.914 2.171 4.914 4.914S34.743 37.029 32 37.029s-4.914-2.171-4.914-4.914S29.371 27.2 32 27.2m0-2.286c-4 0-7.2 3.2-7.2 7.2s3.2 7.2 7.2 7.2 7.2-3.2 7.2-7.2-3.2-7.2-7.2-7.2z"/></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"><g fill="currentColor"><path d="m46.629 35.2-1.943-1.143c.114-.686.229-1.371.229-2.057 0-.686-.114-1.371-.229-2.057l1.943-1.143c1.143-.686 1.486-2.057.8-3.086l-2.286-4c-.686-1.143-2.057-1.486-3.086-.8l-1.943 1.143c-1.029-.914-2.286-1.6-3.543-2.057v-1.714A2.293 2.293 0 0 0 34.285 16h-4.571a2.293 2.293 0 0 0-2.286 2.286V20c-1.257.457-2.514 1.143-3.543 2.057l-1.943-1.143a2.216 2.216 0 0 0-3.086.8l-2.286 4a2.216 2.216 0 0 0 .8 3.086l1.943 1.143c-.113.686-.227 1.371-.227 2.057 0 .686.114 1.371.229 2.057L17.371 35.2c-1.143.686-1.486 2.057-.8 3.086l2.286 4c.686 1.143 2.057 1.486 3.086.8l1.943-1.143c1.029.914 2.286 1.6 3.543 2.057v1.714A2.293 2.293 0 0 0 29.715 48h4.571a2.293 2.293 0 0 0 2.286-2.286V44c1.257-.457 2.514-1.143 3.543-2.057l1.943 1.143a2.216 2.216 0 0 0 3.086-.8l2.286-4c.684-1.029.341-2.515-.801-3.086zM43.2 41.143l-3.429-2.057c-1.486 1.6-3.314 2.743-5.486 3.2v3.429h-4.571v-3.429c-2.171-.457-4-1.6-5.486-3.2L20.8 41.143l-2.286-4 3.429-2.057c-.343-1.029-.571-2.057-.571-3.2s.229-2.171.571-3.2l-3.429-2.057 2.286-4 3.429 2.057c1.486-1.6 3.314-2.743 5.486-3.2v-3.429h4.571v3.429c2.171.457 4 1.6 5.486 3.2l3.429-2.057 2.286 4-3.429 2.057c.343 1.029.571 2.057.571 3.2s-.229 2.171-.571 3.2l3.429 2.057-2.287 4z"/><path d="M32 27.2c2.629 0 4.914 2.171 4.914 4.914S34.743 37.029 32 37.029s-4.914-2.171-4.914-4.914S29.371 27.2 32 27.2m0-2.286c-4 0-7.2 3.2-7.2 7.2s3.2 7.2 7.2 7.2 7.2-3.2 7.2-7.2-3.2-7.2-7.2-7.2z"/></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/modulegroup.svg#modulegroup-system" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="modulegroup-system" 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%3cg fill='%23fff'%3e%3cpath d='m46.629 35.2-1.943-1.143c.114-.686.229-1.371.229-2.057 0-.686-.114-1.371-.229-2.057l1.943-1.143c1.143-.686 1.486-2.057.8-3.086l-2.286-4c-.686-1.143-2.057-1.486-3.086-.8l-1.943 1.143c-1.029-.914-2.286-1.6-3.543-2.057v-1.714A2.293 2.293 0 0 0 34.285 16h-4.571a2.293 2.293 0 0 0-2.286 2.286V20c-1.257.457-2.514 1.143-3.543 2.057l-1.943-1.143a2.216 2.216 0 0 0-3.086.8l-2.286 4a2.216 2.216 0 0 0 .8 3.086l1.943 1.143c-.113.686-.227 1.371-.227 2.057 0 .686.114 1.371.229 2.057L17.371 35.2c-1.143.686-1.486 2.057-.8 3.086l2.286 4c.686 1.143 2.057 1.486 3.086.8l1.943-1.143c1.029.914 2.286 1.6 3.543 2.057v1.714A2.293 2.293 0 0 0 29.715 48h4.571a2.293 2.293 0 0 0 2.286-2.286V44c1.257-.457 2.514-1.143 3.543-2.057l1.943 1.143a2.216 2.216 0 0 0 3.086-.8l2.286-4c.684-1.029.341-2.515-.801-3.086zM43.2 41.143l-3.429-2.057c-1.486 1.6-3.314 2.743-5.486 3.2v3.429h-4.571v-3.429c-2.171-.457-4-1.6-5.486-3.2L20.8 41.143l-2.286-4 3.429-2.057c-.343-1.029-.571-2.057-.571-3.2s.229-2.171.571-3.2l-3.429-2.057 2.286-4 3.429 2.057c1.486-1.6 3.314-2.743 5.486-3.2v-3.429h4.571v3.429c2.171.457 4 1.6 5.486 3.2l3.429-2.057 2.286 4-3.429 2.057c.343 1.029.571 2.057.571 3.2s-.229 2.171-.571 3.2l3.429 2.057-2.287 4z'/%3e%3cpath d='M32 27.2c2.629 0 4.914 2.171 4.914 4.914S34.743 37.029 32 37.029s-4.914-2.171-4.914-4.914S29.371 27.2 32 27.2m0-2.286c-4 0-7.2 3.2-7.2 7.2s3.2 7.2 7.2 7.2 7.2-3.2 7.2-7.2-3.2-7.2-7.2-7.2z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-modulegroup-system;
}

Download

Download