module-info - Backend modules

Module Menu Preview

module-info module-info module-info module-info module-info

Usage

Icon Identifier

module-info

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="8" height="24.23" x="12" y="28" fill="var(--icon-color-accent, #ff8700)" rx="2" ry="2"/><path fill="currentColor" d="M37 26c6.07 0 11 4.93 11 11s-4.93 11-11 11-11-4.93-11-11 4.93-11 11-11m0-4c-8.28 0-15 6.72-15 15s6.72 15 15 15 15-6.72 15-15-6.72-15-15-15"/><path fill="currentColor" d="M35.1 35.7h3.8v8.81h-3.8zM37 33.63c.59 0 1.08-.2 1.48-.6s.6-.89.6-1.48-.2-1.08-.6-1.48-.89-.6-1.48-.6-1.08.2-1.48.6-.6.89-.6 1.48.2 1.08.6 1.48.89.6 1.48.6"/><path fill="var(--icon-color-accent, #ff8700)" d="M37 22c2.53 0 4.91.63 7 1.74V14c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v8.05c.33-.02.66-.05 1-.05M32 22.87V18c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v11.54c1.77-3.08 4.6-5.46 8-6.67"/></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"><rect width="8" height="24.23" x="12" y="28" fill="var(--icon-color-accent, #ff8700)" rx="2" ry="2"/><path fill="currentColor" d="M37 26c6.07 0 11 4.93 11 11s-4.93 11-11 11-11-4.93-11-11 4.93-11 11-11m0-4c-8.28 0-15 6.72-15 15s6.72 15 15 15 15-6.72 15-15-6.72-15-15-15"/><path fill="currentColor" d="M35.1 35.7h3.8v8.81h-3.8zM37 33.63c.59 0 1.08-.2 1.48-.6s.6-.89.6-1.48-.2-1.08-.6-1.48-.89-.6-1.48-.6-1.08.2-1.48.6-.6.89-.6 1.48.2 1.08.6 1.48.89.6 1.48.6"/><path fill="var(--icon-color-accent, #ff8700)" d="M37 22c2.53 0 4.91.63 7 1.74V14c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v8.05c.33-.02.66-.05 1-.05M32 22.87V18c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v11.54c1.77-3.08 4.6-5.46 8-6.67"/></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?v=1792707318708#module-info" /></svg>
    </span>
</span>

TYPO3 ViewHelper

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

TYPO3 Web Component

<typo3-backend-icon identifier="module-info" size="small"></typo3-backend-icon>

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%3crect width='8' height='24.23' x='12' y='28' fill='var(--icon-color-accent, %23ff8700)' rx='2' ry='2'/%3e%3cpath fill='%23fff' d='M37 26c6.07 0 11 4.93 11 11s-4.93 11-11 11-11-4.93-11-11 4.93-11 11-11m0-4c-8.28 0-15 6.72-15 15s6.72 15 15 15 15-6.72 15-15-6.72-15-15-15'/%3e%3cpath fill='%23fff' d='M35.1 35.7h3.8v8.81h-3.8zM37 33.63c.59 0 1.08-.2 1.48-.6s.6-.89.6-1.48-.2-1.08-.6-1.48-.89-.6-1.48-.6-1.08.2-1.48.6-.6.89-.6 1.48.2 1.08.6 1.48.89.6 1.48.6'/%3e%3cpath fill='var(--icon-color-accent, %23ff8700)' d='M37 22c2.53 0 4.91.63 7 1.74V14c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v8.05c.33-.02.66-.05 1-.05M32 22.87V18c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v11.54c1.77-3.08 4.6-5.46 8-6.67'/%3e%3c/svg%3e");
}

Sass Background Variable

@use "@typo3/icons/dist/icons" as *;
@use "@typo3/icons/dist/scss/icons-variables-module" as *;

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

Download

Download SVG