status-user-frontend

Introduced in v1.0.0
Available in TYPO3 7.6 8.6 9.5 10.4 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"><path fill="#79A548" d="M14.5 12.1c-1.688-.482-2.866-1.142-4.04-1.594.072.232.083.351-.06.494-1.2 1.3-3.7 1.2-4.8 0-.145-.145-.118-.265-.031-.505-1.184.451-2.368 1.119-4.069 1.605 0 0-1.4.8-1.5 3.9h16c-.1-3.2-1.5-3.9-1.5-3.9z"/><path fill="#212121" d="M1.097 15c.214-1.294.7-1.843.853-1.99 1.102-.329 1.992-.724 2.782-1.075l.269-.119c.731.705 1.843 1.121 3.017 1.121 1.182 0 2.268-.416 2.983-1.121l.267.118c.793.352 1.688.749 2.796 1.079.161.143.638.666.845 1.986L15 16h1c-.1-3.2-1.5-3.9-1.5-3.9-1.688-.482-2.866-1.142-4.04-1.594.072.232.083.351-.06.494-.588.637-1.488.938-2.383.938-.931 0-1.856-.326-2.417-.938-.145-.145-.118-.265-.031-.505-1.184.451-2.368 1.119-4.069 1.605 0 0-1.4.8-1.5 3.9h1l.097-1z" opacity=".15"/><path fill="#FFC857" d="M8 9c-.709 0-1.411-.411-1.997-.994-.045 2.422-.77 2.627-.403 2.994 1.1 1.2 3.6 1.3 4.8 0 .368-.368-.278-.573-.384-3.014C9.426 8.58 8.717 9 8 9z"/><path fill="#212121" d="M5.251 10.627c.105-.043.213-.092.318-.132-.087.24-.114.36.031.505.132.143.285.269.452.381l.301-.115.155-.433.028-.077c.128-.349.346-.957.432-2.04a3.815 3.815 0 0 1-.965-.71c-.028 1.473-.305 2.121-.437 2.489-.104.04-.21.089-.315.132zM9.505 10.799l.142.466.298.115c.164-.111.32-.234.455-.38.142-.143.131-.262.06-.494l.002.001c-.112-.368-.38-1.02-.445-2.521a3.884 3.884 0 0 1-.952.714c.098 1.032.289 1.63.401 1.975l.039.124z" opacity=".15"/><path fill="#FFC857" d="M8 9C6.3 9 4.6 6.7 4.6 5.1V2.9C4.6 1.3 6 0 7.6 0h.8c1.7 0 3 1.3 3 2.9v2.2C11.4 6.7 9.7 9 8 9z"/><path fill="#212121" d="M8.4 1c1.122 0 2 .835 2 1.9v2.2C10.4 6.219 9.09 8 8 8S5.6 6.219 5.6 5.1V2.9c0-1.012.935-1.9 2-1.9h.8m0-1h-.8c-1.6 0-3 1.3-3 2.9v2.2C4.6 6.7 6.3 9 8 9s3.4-2.3 3.4-3.9V2.9c0-1.6-1.3-2.9-3-2.9z" opacity=".15"/></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"><path fill="#79A548" d="M14.5 12.1c-1.688-.482-2.866-1.142-4.04-1.594.072.232.083.351-.06.494-1.2 1.3-3.7 1.2-4.8 0-.145-.145-.118-.265-.031-.505-1.184.451-2.368 1.119-4.069 1.605 0 0-1.4.8-1.5 3.9h16c-.1-3.2-1.5-3.9-1.5-3.9z"/><path fill="#212121" d="M1.097 15c.214-1.294.7-1.843.853-1.99 1.102-.329 1.992-.724 2.782-1.075l.269-.119c.731.705 1.843 1.121 3.017 1.121 1.182 0 2.268-.416 2.983-1.121l.267.118c.793.352 1.688.749 2.796 1.079.161.143.638.666.845 1.986L15 16h1c-.1-3.2-1.5-3.9-1.5-3.9-1.688-.482-2.866-1.142-4.04-1.594.072.232.083.351-.06.494-.588.637-1.488.938-2.383.938-.931 0-1.856-.326-2.417-.938-.145-.145-.118-.265-.031-.505-1.184.451-2.368 1.119-4.069 1.605 0 0-1.4.8-1.5 3.9h1l.097-1z" opacity=".15"/><path fill="#FFC857" d="M8 9c-.709 0-1.411-.411-1.997-.994-.045 2.422-.77 2.627-.403 2.994 1.1 1.2 3.6 1.3 4.8 0 .368-.368-.278-.573-.384-3.014C9.426 8.58 8.717 9 8 9z"/><path fill="#212121" d="M5.251 10.627c.105-.043.213-.092.318-.132-.087.24-.114.36.031.505.132.143.285.269.452.381l.301-.115.155-.433.028-.077c.128-.349.346-.957.432-2.04a3.815 3.815 0 0 1-.965-.71c-.028 1.473-.305 2.121-.437 2.489-.104.04-.21.089-.315.132zM9.505 10.799l.142.466.298.115c.164-.111.32-.234.455-.38.142-.143.131-.262.06-.494l.002.001c-.112-.368-.38-1.02-.445-2.521a3.884 3.884 0 0 1-.952.714c.098 1.032.289 1.63.401 1.975l.039.124z" opacity=".15"/><path fill="#FFC857" d="M8 9C6.3 9 4.6 6.7 4.6 5.1V2.9C4.6 1.3 6 0 7.6 0h.8c1.7 0 3 1.3 3 2.9v2.2C11.4 6.7 9.7 9 8 9z"/><path fill="#212121" d="M8.4 1c1.122 0 2 .835 2 1.9v2.2C10.4 6.219 9.09 8 8 8S5.6 6.219 5.6 5.1V2.9c0-1.012.935-1.9 2-1.9h.8m0-1h-.8c-1.6 0-3 1.3-3 2.9v2.2C4.6 6.7 6.3 9 8 9s3.4-2.3 3.4-3.9V2.9c0-1.6-1.3-2.9-3-2.9z" opacity=".15"/></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/status.svg#status-user-frontend" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="status-user-frontend" 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%3cpath fill='%2379A548' d='M14.5 12.1c-1.688-.482-2.866-1.142-4.04-1.594.072.232.083.351-.06.494-1.2 1.3-3.7 1.2-4.8 0-.145-.145-.118-.265-.031-.505-1.184.451-2.368 1.119-4.069 1.605 0 0-1.4.8-1.5 3.9h16c-.1-3.2-1.5-3.9-1.5-3.9z'/%3e%3cpath fill='%23212121' d='M1.097 15c.214-1.294.7-1.843.853-1.99 1.102-.329 1.992-.724 2.782-1.075l.269-.119c.731.705 1.843 1.121 3.017 1.121 1.182 0 2.268-.416 2.983-1.121l.267.118c.793.352 1.688.749 2.796 1.079.161.143.638.666.845 1.986L15 16h1c-.1-3.2-1.5-3.9-1.5-3.9-1.688-.482-2.866-1.142-4.04-1.594.072.232.083.351-.06.494-.588.637-1.488.938-2.383.938-.931 0-1.856-.326-2.417-.938-.145-.145-.118-.265-.031-.505-1.184.451-2.368 1.119-4.069 1.605 0 0-1.4.8-1.5 3.9h1l.097-1z' opacity='.15'/%3e%3cpath fill='%23FFC857' d='M8 9c-.709 0-1.411-.411-1.997-.994-.045 2.422-.77 2.627-.403 2.994 1.1 1.2 3.6 1.3 4.8 0 .368-.368-.278-.573-.384-3.014C9.426 8.58 8.717 9 8 9z'/%3e%3cpath fill='%23212121' d='M5.251 10.627c.105-.043.213-.092.318-.132-.087.24-.114.36.031.505.132.143.285.269.452.381l.301-.115.155-.433.028-.077c.128-.349.346-.957.432-2.04a3.815 3.815 0 0 1-.965-.71c-.028 1.473-.305 2.121-.437 2.489-.104.04-.21.089-.315.132zM9.505 10.799l.142.466.298.115c.164-.111.32-.234.455-.38.142-.143.131-.262.06-.494l.002.001c-.112-.368-.38-1.02-.445-2.521a3.884 3.884 0 0 1-.952.714c.098 1.032.289 1.63.401 1.975l.039.124z' opacity='.15'/%3e%3cpath fill='%23FFC857' d='M8 9C6.3 9 4.6 6.7 4.6 5.1V2.9C4.6 1.3 6 0 7.6 0h.8c1.7 0 3 1.3 3 2.9v2.2C11.4 6.7 9.7 9 8 9z'/%3e%3cpath fill='%23212121' d='M8.4 1c1.122 0 2 .835 2 1.9v2.2C10.4 6.219 9.09 8 8 8S5.6 6.219 5.6 5.1V2.9c0-1.012.935-1.9 2-1.9h.8m0-1h-.8c-1.6 0-3 1.3-3 2.9v2.2C4.6 6.7 6.3 9 8 9s3.4-2.3 3.4-3.9V2.9c0-1.6-1.3-2.9-3-2.9z' opacity='.15'/%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-status-user-frontend;
}

Download

Download