actions-wave

Introduced in v4.3.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="M3 12.947C3.652 13.615 4.548 14 5.5 14s1.848-.385 2.5-1.053C8.652 13.615 9.548 14 10.5 14s1.848-.385 2.5-1.053c.536.549 1.24.892 2 1.003v-1.012a2.484 2.484 0 0 1-1.583-1.06c-.186-.28-.648-.28-.834 0a2.492 2.492 0 0 1-4.166 0c-.186-.28-.648-.28-.834 0a2.493 2.493 0 0 1-4.166 0c-.186-.28-.648-.28-.834 0-.37.56-.943.928-1.583 1.06v1.012a3.478 3.478 0 0 0 2-1.003ZM4 7c0-2.206 1.794-4 4-4 .703 0 1.383.189 1.981.539A3.505 3.505 0 0 0 7 7c0 .713.217 1.376.585 1.93l-.002.001.006.006c.147.22.321.418.513.599.058.055.122.1.184.152a3.499 3.499 0 0 0 .683.444c.163.08.333.144.51.198.076.024.15.053.229.071.255.06.518.099.792.099a3.46 3.46 0 0 0 1.068-.185c.025-.008.048-.01.074-.02l-.001-.002c.509-.177.978-.456 1.359-.846a3.48 3.48 0 0 0 2 1.003V9.438a2.49 2.49 0 0 1-1.583-1.06c-.186-.279-.648-.279-.834 0a2.49 2.49 0 0 1-1.313.985 2.879 2.879 0 0 1-.77.137c-.194 0-.383-.028-.567-.07-.055-.013-.106-.034-.16-.05a2.49 2.49 0 0 1-.534-.233 2.498 2.498 0 0 1-.328-.233c-.04-.034-.083-.064-.121-.1a2.518 2.518 0 0 1-.37-.433A2.484 2.484 0 0 1 8 7c0-1.378 1.121-2.5 2.5-2.5.257 0 .524.049.815.15a.5.5 0 0 0 .55-.788A4.974 4.974 0 0 0 8.001 2C5.243 2 3 4.243 3 7c0 1.207-.86 2.217-2 2.45v1C2.692 10.203 4 8.757 4 7Z"/></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="M3 12.947C3.652 13.615 4.548 14 5.5 14s1.848-.385 2.5-1.053C8.652 13.615 9.548 14 10.5 14s1.848-.385 2.5-1.053c.536.549 1.24.892 2 1.003v-1.012a2.484 2.484 0 0 1-1.583-1.06c-.186-.28-.648-.28-.834 0a2.492 2.492 0 0 1-4.166 0c-.186-.28-.648-.28-.834 0a2.493 2.493 0 0 1-4.166 0c-.186-.28-.648-.28-.834 0-.37.56-.943.928-1.583 1.06v1.012a3.478 3.478 0 0 0 2-1.003ZM4 7c0-2.206 1.794-4 4-4 .703 0 1.383.189 1.981.539A3.505 3.505 0 0 0 7 7c0 .713.217 1.376.585 1.93l-.002.001.006.006c.147.22.321.418.513.599.058.055.122.1.184.152a3.499 3.499 0 0 0 .683.444c.163.08.333.144.51.198.076.024.15.053.229.071.255.06.518.099.792.099a3.46 3.46 0 0 0 1.068-.185c.025-.008.048-.01.074-.02l-.001-.002c.509-.177.978-.456 1.359-.846a3.48 3.48 0 0 0 2 1.003V9.438a2.49 2.49 0 0 1-1.583-1.06c-.186-.279-.648-.279-.834 0a2.49 2.49 0 0 1-1.313.985 2.879 2.879 0 0 1-.77.137c-.194 0-.383-.028-.567-.07-.055-.013-.106-.034-.16-.05a2.49 2.49 0 0 1-.534-.233 2.498 2.498 0 0 1-.328-.233c-.04-.034-.083-.064-.121-.1a2.518 2.518 0 0 1-.37-.433A2.484 2.484 0 0 1 8 7c0-1.378 1.121-2.5 2.5-2.5.257 0 .524.049.815.15a.5.5 0 0 0 .55-.788A4.974 4.974 0 0 0 8.001 2C5.243 2 3 4.243 3 7c0 1.207-.86 2.217-2 2.45v1C2.692 10.203 4 8.757 4 7Z"/></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-wave" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="actions-wave" 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='M3 12.947C3.652 13.615 4.548 14 5.5 14s1.848-.385 2.5-1.053C8.652 13.615 9.548 14 10.5 14s1.848-.385 2.5-1.053c.536.549 1.24.892 2 1.003v-1.012a2.484 2.484 0 0 1-1.583-1.06c-.186-.28-.648-.28-.834 0a2.492 2.492 0 0 1-4.166 0c-.186-.28-.648-.28-.834 0a2.493 2.493 0 0 1-4.166 0c-.186-.28-.648-.28-.834 0-.37.56-.943.928-1.583 1.06v1.012a3.478 3.478 0 0 0 2-1.003ZM4 7c0-2.206 1.794-4 4-4 .703 0 1.383.189 1.981.539A3.505 3.505 0 0 0 7 7c0 .713.217 1.376.585 1.93l-.002.001.006.006c.147.22.321.418.513.599.058.055.122.1.184.152a3.499 3.499 0 0 0 .683.444c.163.08.333.144.51.198.076.024.15.053.229.071.255.06.518.099.792.099a3.46 3.46 0 0 0 1.068-.185c.025-.008.048-.01.074-.02l-.001-.002c.509-.177.978-.456 1.359-.846a3.48 3.48 0 0 0 2 1.003V9.438a2.49 2.49 0 0 1-1.583-1.06c-.186-.279-.648-.279-.834 0a2.49 2.49 0 0 1-1.313.985 2.879 2.879 0 0 1-.77.137c-.194 0-.383-.028-.567-.07-.055-.013-.106-.034-.16-.05a2.49 2.49 0 0 1-.534-.233 2.498 2.498 0 0 1-.328-.233c-.04-.034-.083-.064-.121-.1a2.518 2.518 0 0 1-.37-.433A2.484 2.484 0 0 1 8 7c0-1.378 1.121-2.5 2.5-2.5.257 0 .524.049.815.15a.5.5 0 0 0 .55-.788A4.974 4.974 0 0 0 8.001 2C5.243 2 3 4.243 3 7c0 1.207-.86 2.217-2 2.45v1C2.692 10.203 4 8.757 4 7Z'/%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-wave;
}

Download

Download