module-permission

Introduced in v1.0.0
Available in TYPO3 7.6 8.6 9.5 10.4 11.5 12.4 13.x

Module Menu Preview

Usage

Icon Identifier

module-permission

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="currentColor" d="M50.67 30H34.01V24c0-3.25 2.75-6 6-6s6 2.75 6 6c0 1.1.9 2 2 2s2-.9 2-2c0-5.42-4.58-10-10-10s-10 4.58-10 10v6h-2.82c-.74 0-1.33.6-1.33 1.33v19.33c0 .74.6 1.33 1.33 1.33h23.49c.74 0 1.33-.6 1.33-1.33V31.33c0-.74-.6-1.33-1.33-1.33ZM48 48H29.85V34H48v14Z"/><path fill="currentColor" d="M41.49 39.84c0-1.42-1.15-2.56-2.56-2.56s-2.56 1.15-2.56 2.56c0 .83.42 1.53 1.03 2v2.49c0 .35.29.64.64.64h1.8c.35 0 .64-.29.64-.64v-2.49c.61-.47 1.03-1.17 1.03-2Z"/><path fill="var(--icon-color-accent, #ff8700)" d="M25.85 32.03c-.97-.23-1.92-.65-2.59-1.32-1.04-1.02-1.56-2.26-1.56-3.71s.52-2.69 1.56-3.71 2.31-1.54 3.82-1.54c1.14 0 2.15.31 3.03.91.29-2.07 1.24-3.95 2.63-5.43-.28-.16-.58-.31-.89-.43l-.45-3.54c-.09-.72-.72-1.26-1.46-1.26h-5.86c-.74 0-1.37.54-1.46 1.26l-.45 3.54c-.31.13-.62.28-.92.45-.31.18-.6.36-.88.56l-3.38-1.39a1.49 1.49 0 0 0-1.84.6l-2.93 4.93c-.37.63-.21 1.43.39 1.86l2.92 2.16a3 3 0 0 0-.04.51v1.01c0 .16.01.33.04.51l-2.92 2.16c-.59.44-.76 1.24-.39 1.86l2.93 4.93c.37.63 1.16.88 1.84.6l3.38-1.39c.28.2.57.39.86.56s.61.32.94.45l.45 3.54c.09.72.72 1.26 1.46 1.26h1.78V32ZM38.53 27.51V26.5c0-.16-.01-.33-.04-.51l2.92-2.16c.59-.44.76-1.24.39-1.86l-2.34-3.94C36.45 18.31 34 20.93 34 24v6h7.14l-2.69-1.99c.05-.18.08-.34.08-.51Z"/></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="currentColor" d="M50.67 30H34.01V24c0-3.25 2.75-6 6-6s6 2.75 6 6c0 1.1.9 2 2 2s2-.9 2-2c0-5.42-4.58-10-10-10s-10 4.58-10 10v6h-2.82c-.74 0-1.33.6-1.33 1.33v19.33c0 .74.6 1.33 1.33 1.33h23.49c.74 0 1.33-.6 1.33-1.33V31.33c0-.74-.6-1.33-1.33-1.33ZM48 48H29.85V34H48v14Z"/><path fill="currentColor" d="M41.49 39.84c0-1.42-1.15-2.56-2.56-2.56s-2.56 1.15-2.56 2.56c0 .83.42 1.53 1.03 2v2.49c0 .35.29.64.64.64h1.8c.35 0 .64-.29.64-.64v-2.49c.61-.47 1.03-1.17 1.03-2Z"/><path fill="var(--icon-color-accent, #ff8700)" d="M25.85 32.03c-.97-.23-1.92-.65-2.59-1.32-1.04-1.02-1.56-2.26-1.56-3.71s.52-2.69 1.56-3.71 2.31-1.54 3.82-1.54c1.14 0 2.15.31 3.03.91.29-2.07 1.24-3.95 2.63-5.43-.28-.16-.58-.31-.89-.43l-.45-3.54c-.09-.72-.72-1.26-1.46-1.26h-5.86c-.74 0-1.37.54-1.46 1.26l-.45 3.54c-.31.13-.62.28-.92.45-.31.18-.6.36-.88.56l-3.38-1.39a1.49 1.49 0 0 0-1.84.6l-2.93 4.93c-.37.63-.21 1.43.39 1.86l2.92 2.16a3 3 0 0 0-.04.51v1.01c0 .16.01.33.04.51l-2.92 2.16c-.59.44-.76 1.24-.39 1.86l2.93 4.93c.37.63 1.16.88 1.84.6l3.38-1.39c.28.2.57.39.86.56s.61.32.94.45l.45 3.54c.09.72.72 1.26 1.46 1.26h1.78V32ZM38.53 27.51V26.5c0-.16-.01-.33-.04-.51l2.92-2.16c.59-.44.76-1.24.39-1.86l-2.34-3.94C36.45 18.31 34 20.93 34 24v6h7.14l-2.69-1.99c.05-.18.08-.34.08-.51Z"/></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=1772004282855#module-permission" /></svg>
    </span>
</span>

TYPO3 ViewHelper

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

TYPO3 Web Component

<typo3-backend-icon identifier="module-permission" 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%3cpath fill='%23fff' d='M50.67 30H34.01V24c0-3.25 2.75-6 6-6s6 2.75 6 6c0 1.1.9 2 2 2s2-.9 2-2c0-5.42-4.58-10-10-10s-10 4.58-10 10v6h-2.82c-.74 0-1.33.6-1.33 1.33v19.33c0 .74.6 1.33 1.33 1.33h23.49c.74 0 1.33-.6 1.33-1.33V31.33c0-.74-.6-1.33-1.33-1.33ZM48 48H29.85V34H48v14Z'/%3e%3cpath fill='%23fff' d='M41.49 39.84c0-1.42-1.15-2.56-2.56-2.56s-2.56 1.15-2.56 2.56c0 .83.42 1.53 1.03 2v2.49c0 .35.29.64.64.64h1.8c.35 0 .64-.29.64-.64v-2.49c.61-.47 1.03-1.17 1.03-2Z'/%3e%3cpath fill='var(--icon-color-accent, %23ff8700)' d='M25.85 32.03c-.97-.23-1.92-.65-2.59-1.32-1.04-1.02-1.56-2.26-1.56-3.71s.52-2.69 1.56-3.71 2.31-1.54 3.82-1.54c1.14 0 2.15.31 3.03.91.29-2.07 1.24-3.95 2.63-5.43-.28-.16-.58-.31-.89-.43l-.45-3.54c-.09-.72-.72-1.26-1.46-1.26h-5.86c-.74 0-1.37.54-1.46 1.26l-.45 3.54c-.31.13-.62.28-.92.45-.31.18-.6.36-.88.56l-3.38-1.39a1.49 1.49 0 0 0-1.84.6l-2.93 4.93c-.37.63-.21 1.43.39 1.86l2.92 2.16a3 3 0 0 0-.04.51v1.01c0 .16.01.33.04.51l-2.92 2.16c-.59.44-.76 1.24-.39 1.86l2.93 4.93c.37.63 1.16.88 1.84.6l3.38-1.39c.28.2.57.39.86.56s.61.32.94.45l.45 3.54c.09.72.72 1.26 1.46 1.26h1.78V32ZM38.53 27.51V26.5c0-.16-.01-.33-.04-.51l2.92-2.16c.59-.44.76-1.24.39-1.86l-2.34-3.94C36.45 18.31 34 20.93 34 24v6h7.14l-2.69-1.99c.05-.18.08-.34.08-.51Z'/%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-permission;
}

Download

Download