module-setup

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 64 64"><path fill="#59F" d="M0 0h64v64H0z"/><path fill="#FFF" d="M46.6 41.2c-2.815-.768-4.974-1.825-6.976-2.678-.042.543-.243 1.113-.782 1.664-1.62 1.726-4.1 3.814-6.808 3.814-2.719 0-5.288-2.115-6.88-3.817-.558-.573-.743-1.177-.762-1.738-2.007.896-4.17 1.885-6.993 2.655 0 0-3.1 1.9-3.4 8.9h36c-.199-7.1-3.399-8.8-3.399-8.8z"/><path fill="#FFF" d="M40 20.5c0-3.6-3.2-6.5-7-6.5h-2c-3.6 0-7 2.9-7 6.5v5c0 2.109 1.628 4.713 3.5 6.553-.1 5.4-1.7 5.947-.9 6.747 2.5 2.7 8.1 2.9 10.8 0 .797-.797-.59-1.3-.896-6.747C38.333 30.215 39.942 27.59 40 25.5v-5z"/><g><path fill="#FFF" d="M33.77 57.25c-.824 0-1.668-.37-2.313-1.017l-1.69-1.689c-.646-.646-1.016-1.489-1.016-2.313s.37-1.668 1.016-2.314l10.856-10.989a9.014 9.014 0 0 1-.172-1.776c0-2.329.823-4.332 2.446-5.955 1.622-1.623 3.625-2.446 5.953-2.446.778 0 1.531.151 2.196.285l.111.022.106.042c.652.26 1.177.518 1.678.769.642.229 1.059.925 1.059 1.561 0 .648-.407 1.055-.626 1.274l-.114.114-4.2 2.449v2.079l1.638.968c.177-.116.384-.254.578-.384.542-.361 1.077-.66 1.549-.925.25-.14.489-.273.712-.408 1.164-.697 1.635-.697 1.813-.697.213 0 .778 0 1.274.496l.366.366v.29c.065.136.13.285.195.481l.064.192v.203c0 .599-.179 1.403-.479 2.154-.678 1.691-1.673 2.979-3.045 3.94-1.445 1.012-3.087 1.525-4.877 1.525a8.876 8.876 0 0 1-1.994-.219L36.09 56.229c-.652.651-1.495 1.021-2.32 1.021z"/><path fill="#59F" d="M48.85 30c.65 0 1.3.13 1.95.26.65.26 1.17.52 1.69.78.13 0 .26.26.26.39s-.13.26-.26.39l-4.68 2.73v3.51l2.86 1.69c.13 0 .52-.26 1.3-.78s1.56-.91 2.21-1.3 1.04-.52 1.17-.52c.13 0 .26 0 .39.13 0 .13.13.26.26.65 0 .39-.13 1.04-.39 1.69-.52 1.3-1.3 2.47-2.6 3.38-1.3.91-2.73 1.3-4.16 1.3-1.95 0-3.64-.65-5.07-2.08-1.43-1.43-2.08-3.12-2.08-5.07s.65-3.64 2.08-5.07C45.21 30.65 46.9 30 48.85 30m-7.54 10.01c.39 1.04 1.04 1.95 1.82 2.73.78.91 1.69 1.43 2.73 1.82L35.2 55.35c-.39.39-.91.65-1.43.65s-1.04-.26-1.43-.65l-1.69-1.69c-.39-.39-.65-.91-.65-1.43 0-.52.26-1.04.65-1.43l10.66-10.79m-6.5 12.22c.26 0 .52 0 .65-.26.13-.13.26-.39.26-.65s0-.39-.26-.65a.993.993 0 0 0-.65-.26c-.26 0-.39 0-.65.26-.13.13-.26.39-.26.65s0 .39.26.65c.13.13.39.26.65.26M48.85 27.5c-2.671 0-4.972.946-6.838 2.812-1.866 1.866-2.812 4.167-2.812 6.838 0 .462.028.913.085 1.353l-10.413 10.54c-.868.868-1.372 2.033-1.372 3.187s.504 2.319 1.382 3.198l1.69 1.69c.878.878 2.044 1.382 3.198 1.382s2.319-.504 3.198-1.382l10.308-10.434c.509.077 1.034.116 1.574.116a9.705 9.705 0 0 0 5.594-1.752c1.577-1.104 2.718-2.576 3.488-4.5.361-.904.569-1.858.569-2.618v-.406l-.128-.385a4.971 4.971 0 0 0-.132-.354v-.541l-.732-.732c-.572-.572-1.298-.862-2.158-.862-.464 0-1.162.1-2.456.876-.213.128-.441.255-.679.388-.471.264-1.002.561-1.556.925l-.349-.206v-.647l3.44-2.006.279-.163.229-.229c.271-.271.992-.992.992-2.158 0-1.114-.706-2.29-1.83-2.72a22.368 22.368 0 0 0-1.691-.771l-.213-.085-.225-.045c-.725-.145-1.545-.309-2.442-.309z"/></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 64 64"><path fill="#59F" d="M0 0h64v64H0z"/><path fill="#FFF" d="M46.6 41.2c-2.815-.768-4.974-1.825-6.976-2.678-.042.543-.243 1.113-.782 1.664-1.62 1.726-4.1 3.814-6.808 3.814-2.719 0-5.288-2.115-6.88-3.817-.558-.573-.743-1.177-.762-1.738-2.007.896-4.17 1.885-6.993 2.655 0 0-3.1 1.9-3.4 8.9h36c-.199-7.1-3.399-8.8-3.399-8.8z"/><path fill="#FFF" d="M40 20.5c0-3.6-3.2-6.5-7-6.5h-2c-3.6 0-7 2.9-7 6.5v5c0 2.109 1.628 4.713 3.5 6.553-.1 5.4-1.7 5.947-.9 6.747 2.5 2.7 8.1 2.9 10.8 0 .797-.797-.59-1.3-.896-6.747C38.333 30.215 39.942 27.59 40 25.5v-5z"/><g><path fill="#FFF" d="M33.77 57.25c-.824 0-1.668-.37-2.313-1.017l-1.69-1.689c-.646-.646-1.016-1.489-1.016-2.313s.37-1.668 1.016-2.314l10.856-10.989a9.014 9.014 0 0 1-.172-1.776c0-2.329.823-4.332 2.446-5.955 1.622-1.623 3.625-2.446 5.953-2.446.778 0 1.531.151 2.196.285l.111.022.106.042c.652.26 1.177.518 1.678.769.642.229 1.059.925 1.059 1.561 0 .648-.407 1.055-.626 1.274l-.114.114-4.2 2.449v2.079l1.638.968c.177-.116.384-.254.578-.384.542-.361 1.077-.66 1.549-.925.25-.14.489-.273.712-.408 1.164-.697 1.635-.697 1.813-.697.213 0 .778 0 1.274.496l.366.366v.29c.065.136.13.285.195.481l.064.192v.203c0 .599-.179 1.403-.479 2.154-.678 1.691-1.673 2.979-3.045 3.94-1.445 1.012-3.087 1.525-4.877 1.525a8.876 8.876 0 0 1-1.994-.219L36.09 56.229c-.652.651-1.495 1.021-2.32 1.021z"/><path fill="#59F" d="M48.85 30c.65 0 1.3.13 1.95.26.65.26 1.17.52 1.69.78.13 0 .26.26.26.39s-.13.26-.26.39l-4.68 2.73v3.51l2.86 1.69c.13 0 .52-.26 1.3-.78s1.56-.91 2.21-1.3 1.04-.52 1.17-.52c.13 0 .26 0 .39.13 0 .13.13.26.26.65 0 .39-.13 1.04-.39 1.69-.52 1.3-1.3 2.47-2.6 3.38-1.3.91-2.73 1.3-4.16 1.3-1.95 0-3.64-.65-5.07-2.08-1.43-1.43-2.08-3.12-2.08-5.07s.65-3.64 2.08-5.07C45.21 30.65 46.9 30 48.85 30m-7.54 10.01c.39 1.04 1.04 1.95 1.82 2.73.78.91 1.69 1.43 2.73 1.82L35.2 55.35c-.39.39-.91.65-1.43.65s-1.04-.26-1.43-.65l-1.69-1.69c-.39-.39-.65-.91-.65-1.43 0-.52.26-1.04.65-1.43l10.66-10.79m-6.5 12.22c.26 0 .52 0 .65-.26.13-.13.26-.39.26-.65s0-.39-.26-.65a.993.993 0 0 0-.65-.26c-.26 0-.39 0-.65.26-.13.13-.26.39-.26.65s0 .39.26.65c.13.13.39.26.65.26M48.85 27.5c-2.671 0-4.972.946-6.838 2.812-1.866 1.866-2.812 4.167-2.812 6.838 0 .462.028.913.085 1.353l-10.413 10.54c-.868.868-1.372 2.033-1.372 3.187s.504 2.319 1.382 3.198l1.69 1.69c.878.878 2.044 1.382 3.198 1.382s2.319-.504 3.198-1.382l10.308-10.434c.509.077 1.034.116 1.574.116a9.705 9.705 0 0 0 5.594-1.752c1.577-1.104 2.718-2.576 3.488-4.5.361-.904.569-1.858.569-2.618v-.406l-.128-.385a4.971 4.971 0 0 0-.132-.354v-.541l-.732-.732c-.572-.572-1.298-.862-2.158-.862-.464 0-1.162.1-2.456.876-.213.128-.441.255-.679.388-.471.264-1.002.561-1.556.925l-.349-.206v-.647l3.44-2.006.279-.163.229-.229c.271-.271.992-.992.992-2.158 0-1.114-.706-2.29-1.83-2.72a22.368 22.368 0 0 0-1.691-.771l-.213-.085-.225-.045c-.725-.145-1.545-.309-2.442-.309z"/></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/module.svg#module-setup" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-setup" 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 64 64'%3e%3cpath fill='%2359F' d='M0 0h64v64H0z'/%3e%3cpath fill='%23FFF' d='M46.6 41.2c-2.815-.768-4.974-1.825-6.976-2.678-.042.543-.243 1.113-.782 1.664-1.62 1.726-4.1 3.814-6.808 3.814-2.719 0-5.288-2.115-6.88-3.817-.558-.573-.743-1.177-.762-1.738-2.007.896-4.17 1.885-6.993 2.655 0 0-3.1 1.9-3.4 8.9h36c-.199-7.1-3.399-8.8-3.399-8.8z'/%3e%3cpath fill='%23FFF' d='M40 20.5c0-3.6-3.2-6.5-7-6.5h-2c-3.6 0-7 2.9-7 6.5v5c0 2.109 1.628 4.713 3.5 6.553-.1 5.4-1.7 5.947-.9 6.747 2.5 2.7 8.1 2.9 10.8 0 .797-.797-.59-1.3-.896-6.747C38.333 30.215 39.942 27.59 40 25.5v-5z'/%3e%3cg%3e%3cpath fill='%23FFF' d='M33.77 57.25c-.824 0-1.668-.37-2.313-1.017l-1.69-1.689c-.646-.646-1.016-1.489-1.016-2.313s.37-1.668 1.016-2.314l10.856-10.989a9.014 9.014 0 0 1-.172-1.776c0-2.329.823-4.332 2.446-5.955 1.622-1.623 3.625-2.446 5.953-2.446.778 0 1.531.151 2.196.285l.111.022.106.042c.652.26 1.177.518 1.678.769.642.229 1.059.925 1.059 1.561 0 .648-.407 1.055-.626 1.274l-.114.114-4.2 2.449v2.079l1.638.968c.177-.116.384-.254.578-.384.542-.361 1.077-.66 1.549-.925.25-.14.489-.273.712-.408 1.164-.697 1.635-.697 1.813-.697.213 0 .778 0 1.274.496l.366.366v.29c.065.136.13.285.195.481l.064.192v.203c0 .599-.179 1.403-.479 2.154-.678 1.691-1.673 2.979-3.045 3.94-1.445 1.012-3.087 1.525-4.877 1.525a8.876 8.876 0 0 1-1.994-.219L36.09 56.229c-.652.651-1.495 1.021-2.32 1.021z'/%3e%3cpath fill='%2359F' d='M48.85 30c.65 0 1.3.13 1.95.26.65.26 1.17.52 1.69.78.13 0 .26.26.26.39s-.13.26-.26.39l-4.68 2.73v3.51l2.86 1.69c.13 0 .52-.26 1.3-.78s1.56-.91 2.21-1.3 1.04-.52 1.17-.52c.13 0 .26 0 .39.13 0 .13.13.26.26.65 0 .39-.13 1.04-.39 1.69-.52 1.3-1.3 2.47-2.6 3.38-1.3.91-2.73 1.3-4.16 1.3-1.95 0-3.64-.65-5.07-2.08-1.43-1.43-2.08-3.12-2.08-5.07s.65-3.64 2.08-5.07C45.21 30.65 46.9 30 48.85 30m-7.54 10.01c.39 1.04 1.04 1.95 1.82 2.73.78.91 1.69 1.43 2.73 1.82L35.2 55.35c-.39.39-.91.65-1.43.65s-1.04-.26-1.43-.65l-1.69-1.69c-.39-.39-.65-.91-.65-1.43 0-.52.26-1.04.65-1.43l10.66-10.79m-6.5 12.22c.26 0 .52 0 .65-.26.13-.13.26-.39.26-.65s0-.39-.26-.65a.993.993 0 0 0-.65-.26c-.26 0-.39 0-.65.26-.13.13-.26.39-.26.65s0 .39.26.65c.13.13.39.26.65.26M48.85 27.5c-2.671 0-4.972.946-6.838 2.812-1.866 1.866-2.812 4.167-2.812 6.838 0 .462.028.913.085 1.353l-10.413 10.54c-.868.868-1.372 2.033-1.372 3.187s.504 2.319 1.382 3.198l1.69 1.69c.878.878 2.044 1.382 3.198 1.382s2.319-.504 3.198-1.382l10.308-10.434c.509.077 1.034.116 1.574.116a9.705 9.705 0 0 0 5.594-1.752c1.577-1.104 2.718-2.576 3.488-4.5.361-.904.569-1.858.569-2.618v-.406l-.128-.385a4.971 4.971 0 0 0-.132-.354v-.541l-.732-.732c-.572-.572-1.298-.862-2.158-.862-.464 0-1.162.1-2.456.876-.213.128-.441.255-.679.388-.471.264-1.002.561-1.556.925l-.349-.206v-.647l3.44-2.006.279-.163.229-.229c.271-.271.992-.992.992-2.158 0-1.114-.706-2.29-1.83-2.72a22.368 22.368 0 0 0-1.691-.771l-.213-.085-.225-.045c-.725-.145-1.545-.309-2.442-.309z'/%3e%3c/g%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-setup;
}

Download

Download