install-wizards

Introduced in v1.8.0
Available in TYPO3 9.5 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><ellipse cx="16" cy="26.5" fill="#4C2875" rx="14" ry="3.5"/><path fill="#639" d="m26 25-10.2 2L6 25s3.5-10.4 7.1-16.6C16.5 2.6 20 2 21 2c2 0-.3 1 0 3 .6 4.5 5 20 5 20z"/><path fill="#FFC857" d="M16 25c-4.3 0-7.9-.8-9.3-1.9C6.2 24.3 6 25 6 25c0 1.7 4.5 3 10 3s10-1.3 10-3c0 0-.2-.8-.6-2-1.3 1.2-5 2-9.4 2zM21.2 10c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l.8-.3L22 10h-.8zM20.7 15h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.1.1-.4-.2-.4zM15.1 8.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3L18 9.3l.9-.9c.2-.1.1-.4-.2-.4h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0L16.3 8h-1.1c-.2 0-.3.3-.1.4zM22.8 21.7l1.2-.5 1.1.4c-.3-1.1-.7-2.5-1.1-3.9-.1 0-.2 0-.2.2l-.5 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3zM16.8 4.7l1.2-.4 1.2.5c.2.1.4-.1.3-.3L19 3.3l.9-.9c.1-.1.1-.2.1-.2-.8.2-2 .7-3.3 1.8l-.2.5c-.1.1.1.3.3.2zM8 21.3l1.2.5c.2.1.4-.1.3-.3L9 20.3l.9-.9c.2-.2 0-.4-.2-.4h-1l-.2-.6c-.5 1.2-.9 2.2-1.2 3.2l.7-.3zM17.2 22.7c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.2 0-.4-.2-.4h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5zM11.5 11.5l.5-.2 1.2.5c.2.1.4-.1.3-.3l-.5-1.2.9-.9c.2-.1.1-.4-.2-.4h-1c-.4.8-.8 1.6-1.2 2.5zM14.7 15h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.1.1-.4-.2-.4z"/></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 32 32"><ellipse cx="16" cy="26.5" fill="#4C2875" rx="14" ry="3.5"/><path fill="#639" d="m26 25-10.2 2L6 25s3.5-10.4 7.1-16.6C16.5 2.6 20 2 21 2c2 0-.3 1 0 3 .6 4.5 5 20 5 20z"/><path fill="#FFC857" d="M16 25c-4.3 0-7.9-.8-9.3-1.9C6.2 24.3 6 25 6 25c0 1.7 4.5 3 10 3s10-1.3 10-3c0 0-.2-.8-.6-2-1.3 1.2-5 2-9.4 2zM21.2 10c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l.8-.3L22 10h-.8zM20.7 15h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.1.1-.4-.2-.4zM15.1 8.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3L18 9.3l.9-.9c.2-.1.1-.4-.2-.4h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0L16.3 8h-1.1c-.2 0-.3.3-.1.4zM22.8 21.7l1.2-.5 1.1.4c-.3-1.1-.7-2.5-1.1-3.9-.1 0-.2 0-.2.2l-.5 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3zM16.8 4.7l1.2-.4 1.2.5c.2.1.4-.1.3-.3L19 3.3l.9-.9c.1-.1.1-.2.1-.2-.8.2-2 .7-3.3 1.8l-.2.5c-.1.1.1.3.3.2zM8 21.3l1.2.5c.2.1.4-.1.3-.3L9 20.3l.9-.9c.2-.2 0-.4-.2-.4h-1l-.2-.6c-.5 1.2-.9 2.2-1.2 3.2l.7-.3zM17.2 22.7c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.2 0-.4-.2-.4h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5zM11.5 11.5l.5-.2 1.2.5c.2.1.4-.1.3-.3l-.5-1.2.9-.9c.2-.1.1-.4-.2-.4h-1c-.4.8-.8 1.6-1.2 2.5zM14.7 15h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.1.1-.4-.2-.4z"/></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/install.svg#install-wizards" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="install-wizards" 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 32 32'%3e%3cellipse cx='16' cy='26.5' fill='%234C2875' rx='14' ry='3.5'/%3e%3cpath fill='%23639' d='m26 25-10.2 2L6 25s3.5-10.4 7.1-16.6C16.5 2.6 20 2 21 2c2 0-.3 1 0 3 .6 4.5 5 20 5 20z'/%3e%3cpath fill='%23FFC857' d='M16 25c-4.3 0-7.9-.8-9.3-1.9C6.2 24.3 6 25 6 25c0 1.7 4.5 3 10 3s10-1.3 10-3c0 0-.2-.8-.6-2-1.3 1.2-5 2-9.4 2zM21.2 10c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l.8-.3L22 10h-.8zM20.7 15h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.1.1-.4-.2-.4zM15.1 8.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3L18 9.3l.9-.9c.2-.1.1-.4-.2-.4h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0L16.3 8h-1.1c-.2 0-.3.3-.1.4zM22.8 21.7l1.2-.5 1.1.4c-.3-1.1-.7-2.5-1.1-3.9-.1 0-.2 0-.2.2l-.5 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3zM16.8 4.7l1.2-.4 1.2.5c.2.1.4-.1.3-.3L19 3.3l.9-.9c.1-.1.1-.2.1-.2-.8.2-2 .7-3.3 1.8l-.2.5c-.1.1.1.3.3.2zM8 21.3l1.2.5c.2.1.4-.1.3-.3L9 20.3l.9-.9c.2-.2 0-.4-.2-.4h-1l-.2-.6c-.5 1.2-.9 2.2-1.2 3.2l.7-.3zM17.2 22.7c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.2 0-.4-.2-.4h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5zM11.5 11.5l.5-.2 1.2.5c.2.1.4-.1.3-.3l-.5-1.2.9-.9c.2-.1.1-.4-.2-.4h-1c-.4.8-.8 1.6-1.2 2.5zM14.7 15h-1.1l-.4-1.1c-.1-.2-.4-.2-.5 0l-.4 1.1h-1.1c-.2 0-.3.3-.2.4l.9.9-.4 1.1c-.1.2.1.4.3.3l1.2-.5 1.2.5c.2.1.4-.1.3-.3l-.5-1.1.9-.9c.2-.1.1-.4-.2-.4z'/%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-install-wizards;
}

Download

Download