overlay-backenduser

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

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><g><path fill="#666" d="M5.725 0h-.45C3.818 0 2.588 1.205 2.588 2.631v1.237c0 .649.287 1.38.769 1.99a3.108 3.108 0 0 1-.044.301l-.288.127c-.441.196-.896.398-1.456.558l-.116.033-.105.06C1.135 7.059 0 7.809 0 10v1h11v-1c0-2.275-1.175-2.978-1.396-3.088L9.52 6.87l-.089-.026c-.562-.16-1.019-.364-1.461-.56l-.255-.113a3.819 3.819 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V2.631C8.412 1.156 7.232 0 5.725 0z"/><path fill="#FFC857" d="M9.156 7.806c-.949-.271-1.612-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V2.631c0-.9-.731-1.631-1.688-1.631h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.666.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/><path fill="#59F" d="M9.156 7.806c-.95-.271-1.612-.642-2.273-.897.04.131.047.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.149-.017-.284-.666.254-1.332.629-2.289.903 0 0-.787.45-.844 2.194H10c-.056-1.8-.844-2.194-.844-2.194z"/></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"><path fill="#EFEFEF" d="M2 0v16h12V4l-4-4H2z"/><path fill="#FFF" d="M10 4V0l4 4h-4z" opacity=".65"/><path fill="#212121" d="M13 5v5L9 5h4z" opacity=".2"/><path fill="#999" d="M2 0v16h12V4l-4-4H2zm1 1h6v4h4v10H3V1zm7 .4L12.6 4H10V1.4z"/></svg>
    </span>
    <span class="icon-overlay">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><g><path fill="#666" d="M5.725 0h-.45C3.818 0 2.588 1.205 2.588 2.631v1.237c0 .649.287 1.38.769 1.99a3.108 3.108 0 0 1-.044.301l-.288.127c-.441.196-.896.398-1.456.558l-.116.033-.105.06C1.135 7.059 0 7.809 0 10v1h11v-1c0-2.275-1.175-2.978-1.396-3.088L9.52 6.87l-.089-.026c-.562-.16-1.019-.364-1.461-.56l-.255-.113a3.819 3.819 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V2.631C8.412 1.156 7.232 0 5.725 0z"/><path fill="#FFC857" d="M9.156 7.806c-.949-.271-1.612-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V2.631c0-.9-.731-1.631-1.688-1.631h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.666.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/><path fill="#59F" d="M9.156 7.806c-.95-.271-1.612-.642-2.273-.897.04.131.047.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.149-.017-.284-.666.254-1.332.629-2.289.903 0 0-.787.45-.844 2.194H10c-.056-1.8-.844-2.194-.844-2.194z"/></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/apps.svg#apps-pagetree-page" /></svg>
    </span>
    <span class="icon-overlay">
        <svg role="img"><use xlink:href="dist/sprites/overlay.svg#overlay-backenduser" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="apps-pagetree-page" overlay="overlay-backenduser" 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 11 11'%3e%3cg%3e%3cpath fill='%23666' d='M5.725 0h-.45C3.818 0 2.588 1.205 2.588 2.631v1.237c0 .649.287 1.38.769 1.99a3.108 3.108 0 0 1-.044.301l-.288.127c-.441.196-.896.398-1.456.558l-.116.033-.105.06C1.135 7.059 0 7.809 0 10v1h11v-1c0-2.275-1.175-2.978-1.396-3.088L9.52 6.87l-.089-.026c-.562-.16-1.019-.364-1.461-.56l-.255-.113a3.819 3.819 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V2.631C8.412 1.156 7.232 0 5.725 0z'/%3e%3cpath fill='%23FFC857' d='M9.156 7.806c-.949-.271-1.612-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V2.631c0-.9-.731-1.631-1.688-1.631h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.666.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z'/%3e%3cpath fill='%2359F' d='M9.156 7.806c-.95-.271-1.612-.642-2.273-.897.04.131.047.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.149-.017-.284-.666.254-1.332.629-2.289.903 0 0-.787.45-.844 2.194H10c-.056-1.8-.844-2.194-.844-2.194z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-overlay-backenduser;
}

Download

Download