actions-selection-elements-invert
Introduced in v3.5.0
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="M4 14h2v1H4zM10.001 7.999h2v1h-2zM1 10h1v2H1zM4 7.001h2v1H4zM14 4h1v2h-1zM6.999 4h1v2h-1zM3 14c-.551 0-1-.449-1-1H1a2 2 0 0 0 2 2v-1zM3 8.001v-1a2 2 0 0 0-2 2h1c0-.551.449-1 1-1zM13 2c.551 0 1 .449 1 1h1a2 2 0 0 0-2-2v1zM10 1h2v1h-2zM9.001 2V1a2 2 0 0 0-2 2h1c0-.551.449-1 1-1zM6.999 14v1a2 2 0 0 0 2-2h-1c0 .551-.449 1-1 1zM13 7.999v1a2 2 0 0 0 2-2h-1c0 .551-.449 1-1 1zM7.999 10h1v2h-1z"/><g opacity=".5"><path d="M5 3v2H3V3h2m0-1H3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/></g><path d="M12 7h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1z"/><g opacity=".5"><path d="M13 11v2h-2v-2h2m0-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z"/></g><path d="M6 13H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zM7 7v1a1 1 0 0 0 1-1H7zM9 9V8a1 1 0 0 0-1 1h1z"/></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="M4 14h2v1H4zM10.001 7.999h2v1h-2zM1 10h1v2H1zM4 7.001h2v1H4zM14 4h1v2h-1zM6.999 4h1v2h-1zM3 14c-.551 0-1-.449-1-1H1a2 2 0 0 0 2 2v-1zM3 8.001v-1a2 2 0 0 0-2 2h1c0-.551.449-1 1-1zM13 2c.551 0 1 .449 1 1h1a2 2 0 0 0-2-2v1zM10 1h2v1h-2zM9.001 2V1a2 2 0 0 0-2 2h1c0-.551.449-1 1-1zM6.999 14v1a2 2 0 0 0 2-2h-1c0 .551-.449 1-1 1zM13 7.999v1a2 2 0 0 0 2-2h-1c0 .551-.449 1-1 1zM7.999 10h1v2h-1z"/><g opacity=".5"><path d="M5 3v2H3V3h2m0-1H3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/></g><path d="M12 7h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1z"/><g opacity=".5"><path d="M13 11v2h-2v-2h2m0-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z"/></g><path d="M6 13H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zM7 7v1a1 1 0 0 0 1-1H7zM9 9V8a1 1 0 0 0-1 1h1z"/></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-selection-elements-invert" /></svg>
</span>
</span>TYPO3 ViewHelper
<core:icon identifier="actions-selection-elements-invert" 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='M4 14h2v1H4zM10.001 7.999h2v1h-2zM1 10h1v2H1zM4 7.001h2v1H4zM14 4h1v2h-1zM6.999 4h1v2h-1zM3 14c-.551 0-1-.449-1-1H1a2 2 0 0 0 2 2v-1zM3 8.001v-1a2 2 0 0 0-2 2h1c0-.551.449-1 1-1zM13 2c.551 0 1 .449 1 1h1a2 2 0 0 0-2-2v1zM10 1h2v1h-2zM9.001 2V1a2 2 0 0 0-2 2h1c0-.551.449-1 1-1zM6.999 14v1a2 2 0 0 0 2-2h-1c0 .551-.449 1-1 1zM13 7.999v1a2 2 0 0 0 2-2h-1c0 .551-.449 1-1 1zM7.999 10h1v2h-1z'/%3e%3cg opacity='.5'%3e%3cpath d='M5 3v2H3V3h2m0-1H3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z'/%3e%3c/g%3e%3cpath d='M12 7h-2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1z'/%3e%3cg opacity='.5'%3e%3cpath d='M13 11v2h-2v-2h2m0-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z'/%3e%3c/g%3e%3cpath d='M6 13H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zM7 7v1a1 1 0 0 0 1-1H7zM9 9V8a1 1 0 0 0-1 1h1z'/%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-selection-elements-invert;
}