actions-user-switch

Introduced in v2.0.0
Available in TYPO3 10.4 11.5

Buttons

Button Label Button Label

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M9.199 10c-.334.362-.803.6-1.203.6 1.07-.022 2.055-1.408 2.154-2.4V6.8c0-1-.8-1.8-1.9-1.8h-.5c-1 0-1.9.8-1.9 1.8v1.4c0 .622.387 1.4.945 1.898-.015.959-.24 1.311-.319 1.532-.059-.01-.087-.019-.076-.03-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h10c-.3-2-1.1-2.4-1.1-2.4-1.03-.28-1.709-.65-2.366-.941C9.477 11.43 9.2 11.01 9.2 10Z"/><path d="M3.68 4.965a4.905 4.905 0 0 1 6.747-1.556l-.756 1.21a.252.252 0 0 0 .214.384h3.886a.251.251 0 0 0 .225-.362L12.294 1.15a.252.252 0 0 0-.44-.023l-.825 1.32a6.036 6.036 0 0 0-8.31 1.919c-.58.929-.805 1.589-.839 2.61l1.152-.003c.032-.81.187-1.264.648-2.007Z"/></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 16 16"><g fill="currentColor"><path d="M9.199 10c-.334.362-.803.6-1.203.6 1.07-.022 2.055-1.408 2.154-2.4V6.8c0-1-.8-1.8-1.9-1.8h-.5c-1 0-1.9.8-1.9 1.8v1.4c0 .622.387 1.4.945 1.898-.015.959-.24 1.311-.319 1.532-.059-.01-.087-.019-.076-.03-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h10c-.3-2-1.1-2.4-1.1-2.4-1.03-.28-1.709-.65-2.366-.941C9.477 11.43 9.2 11.01 9.2 10Z"/><path d="M3.68 4.965a4.905 4.905 0 0 1 6.747-1.556l-.756 1.21a.252.252 0 0 0 .214.384h3.886a.251.251 0 0 0 .225-.362L12.294 1.15a.252.252 0 0 0-.44-.023l-.825 1.32a6.036 6.036 0 0 0-8.31 1.919c-.58.929-.805 1.589-.839 2.61l1.152-.003c.032-.81.187-1.264.648-2.007Z"/></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/actions.svg#actions-user-switch" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="actions-user-switch" 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 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='M9.199 10c-.334.362-.803.6-1.203.6 1.07-.022 2.055-1.408 2.154-2.4V6.8c0-1-.8-1.8-1.9-1.8h-.5c-1 0-1.9.8-1.9 1.8v1.4c0 .622.387 1.4.945 1.898-.015.959-.24 1.311-.319 1.532-.059-.01-.087-.019-.076-.03-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h10c-.3-2-1.1-2.4-1.1-2.4-1.03-.28-1.709-.65-2.366-.941C9.477 11.43 9.2 11.01 9.2 10Z'/%3e%3cpath d='M3.68 4.965a4.905 4.905 0 0 1 6.747-1.556l-.756 1.21a.252.252 0 0 0 .214.384h3.886a.251.251 0 0 0 .225-.362L12.294 1.15a.252.252 0 0 0-.44-.023l-.825 1.32a6.036 6.036 0 0 0-8.31 1.919c-.58.929-.805 1.589-.839 2.61l1.152-.003c.032-.81.187-1.264.648-2.007Z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-actions-user-switch;
}

Alias

  • actions-system-backend-user-switch

Download

Download