actions-key

Introduced in v2.2.1
Available in TYPO3 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="M10.25 1.75a4.004 4.004 0 0 1 3.975 4.45c-.192 1.751-1.61 3.174-3.343 3.492-.645.118-1.277.058-1.98-.195l-.598-.216-.718.719H6v1.75a.25.25 0 0 1-.25.25H4v1.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.652a.5.5 0 0 1 .137-.344l4.344-4.586-.12-.522a3.982 3.982 0 0 1-.111-.896c0-2.206 1.794-4 4-4m0-1a5 5 0 0 0-5 5c0 .386.053.759.136 1.12l-4.112 4.34a1 1 0 0 0-.274.688v2.352c0 .414.336.75.75.75h2.5a.75.75 0 0 0 .75-.75V13h1.25a.75.75 0 0 0 .75-.75V11h1l.563-.563c1.22.44 2.618.513 4.18-.427 1.328-.8 2.307-2.154 2.476-3.695A5.001 5.001 0 0 0 10.25.75z"/><circle cx="11.5" cy="4.5" r=".875"/></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="M10.25 1.75a4.004 4.004 0 0 1 3.975 4.45c-.192 1.751-1.61 3.174-3.343 3.492-.645.118-1.277.058-1.98-.195l-.598-.216-.718.719H6v1.75a.25.25 0 0 1-.25.25H4v1.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.652a.5.5 0 0 1 .137-.344l4.344-4.586-.12-.522a3.982 3.982 0 0 1-.111-.896c0-2.206 1.794-4 4-4m0-1a5 5 0 0 0-5 5c0 .386.053.759.136 1.12l-4.112 4.34a1 1 0 0 0-.274.688v2.352c0 .414.336.75.75.75h2.5a.75.75 0 0 0 .75-.75V13h1.25a.75.75 0 0 0 .75-.75V11h1l.563-.563c1.22.44 2.618.513 4.18-.427 1.328-.8 2.307-2.154 2.476-3.695A5.001 5.001 0 0 0 10.25.75z"/><circle cx="11.5" cy="4.5" r=".875"/></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-key" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="actions-key" 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='M10.25 1.75a4.004 4.004 0 0 1 3.975 4.45c-.192 1.751-1.61 3.174-3.343 3.492-.645.118-1.277.058-1.98-.195l-.598-.216-.718.719H6v1.75a.25.25 0 0 1-.25.25H4v1.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.652a.5.5 0 0 1 .137-.344l4.344-4.586-.12-.522a3.982 3.982 0 0 1-.111-.896c0-2.206 1.794-4 4-4m0-1a5 5 0 0 0-5 5c0 .386.053.759.136 1.12l-4.112 4.34a1 1 0 0 0-.274.688v2.352c0 .414.336.75.75.75h2.5a.75.75 0 0 0 .75-.75V13h1.25a.75.75 0 0 0 .75-.75V11h1l.563-.563c1.22.44 2.618.513 4.18-.427 1.328-.8 2.307-2.154 2.476-3.695A5.001 5.001 0 0 0 10.25.75z'/%3e%3ccircle cx='11.5' cy='4.5' r='.875'/%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-key;
}

Download

Download