content-user - Content - @typo3/icons SVG icons for the TYPO3 CMS backend

Buttons

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#8C8C8C" d="M14.5 12.1c-1.7-.5-2.9-1.1-4-1.6.1.2.1.4-.1.5-1.2 1.3-3.7 1.2-4.8 0-.1-.1-.1-.3 0-.5-1.2.5-2.4 1.1-4.1 1.6 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.1 15c.2-1.3.7-1.8.9-2 1.1-.3 2-.7 2.8-1.1.1 0 .2-.1.3-.1.7.7 1.8 1.1 3 1.1s2.3-.4 3-1.1c.1 0 .2.1.3.1.8.4 1.7.7 2.8 1.1.2.1.6.7.8 2l.1 1h1c-.1-3.2-1.5-3.9-1.5-3.9-1.7-.5-2.9-1.1-4-1.6.1.2.1.4-.1.5-.6.6-1.5.9-2.4.9-.9 0-1.9-.3-2.4-.9-.1-.1-.1-.3 0-.5-1.2.5-2.4 1.1-4.1 1.6 0 0-1.4.8-1.5 3.9h1v-1z" opacity=".15"/><path fill="#FFC857" d="M8 9c-.7 0-1.4-.4-2-1 0 2.4-.8 2.6-.4 3 1.1 1.2 3.6 1.3 4.8 0 .4-.4-.3-.6-.4-3-.6.6-1.3 1-2 1z"/><path fill="#E8A33D" d="M5.3 10.6c.1 0 .2-.1.3-.1-.1.2-.1.4 0 .5.1.1.3.3.5.4l.3-.1.2-.4v-.1c.1-.3.3-1 .4-2-.4-.3-.7-.5-1-.8 0 1.5-.3 2.1-.4 2.5-.1 0-.2.1-.3.1zM9.5 10.8l.1.5.3.1c.2-.1.3-.2.5-.4.1-.1.1-.3.1-.5-.1-.4-.4-1-.4-2.5-.3.3-.6.5-1 .7.1 1 .3 1.6.4 2v.1z"/><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="#E8A33D" d="M8.4 1c1.1 0 2 .8 2 1.9v2.2C10.4 6.2 9.1 8 8 8S5.6 6.2 5.6 5.1V2.9c0-1 .9-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"/></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="#8C8C8C" d="M14.5 12.1c-1.7-.5-2.9-1.1-4-1.6.1.2.1.4-.1.5-1.2 1.3-3.7 1.2-4.8 0-.1-.1-.1-.3 0-.5-1.2.5-2.4 1.1-4.1 1.6 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.1 15c.2-1.3.7-1.8.9-2 1.1-.3 2-.7 2.8-1.1.1 0 .2-.1.3-.1.7.7 1.8 1.1 3 1.1s2.3-.4 3-1.1c.1 0 .2.1.3.1.8.4 1.7.7 2.8 1.1.2.1.6.7.8 2l.1 1h1c-.1-3.2-1.5-3.9-1.5-3.9-1.7-.5-2.9-1.1-4-1.6.1.2.1.4-.1.5-.6.6-1.5.9-2.4.9-.9 0-1.9-.3-2.4-.9-.1-.1-.1-.3 0-.5-1.2.5-2.4 1.1-4.1 1.6 0 0-1.4.8-1.5 3.9h1v-1z" opacity=".15"/><path fill="#FFC857" d="M8 9c-.7 0-1.4-.4-2-1 0 2.4-.8 2.6-.4 3 1.1 1.2 3.6 1.3 4.8 0 .4-.4-.3-.6-.4-3-.6.6-1.3 1-2 1z"/><path fill="#E8A33D" d="M5.3 10.6c.1 0 .2-.1.3-.1-.1.2-.1.4 0 .5.1.1.3.3.5.4l.3-.1.2-.4v-.1c.1-.3.3-1 .4-2-.4-.3-.7-.5-1-.8 0 1.5-.3 2.1-.4 2.5-.1 0-.2.1-.3.1zM9.5 10.8l.1.5.3.1c.2-.1.3-.2.5-.4.1-.1.1-.3.1-.5-.1-.4-.4-1-.4-2.5-.3.3-.6.5-1 .7.1 1 .3 1.6.4 2v.1z"/><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="#E8A33D" d="M8.4 1c1.1 0 2 .8 2 1.9v2.2C10.4 6.2 9.1 8 8 8S5.6 6.2 5.6 5.1V2.9c0-1 .9-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"/></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/content.svg#content-user" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="content-user" 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='%238C8C8C' d='M14.5 12.1c-1.7-.5-2.9-1.1-4-1.6.1.2.1.4-.1.5-1.2 1.3-3.7 1.2-4.8 0-.1-.1-.1-.3 0-.5-1.2.5-2.4 1.1-4.1 1.6 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.1 15c.2-1.3.7-1.8.9-2 1.1-.3 2-.7 2.8-1.1.1 0 .2-.1.3-.1.7.7 1.8 1.1 3 1.1s2.3-.4 3-1.1c.1 0 .2.1.3.1.8.4 1.7.7 2.8 1.1.2.1.6.7.8 2l.1 1h1c-.1-3.2-1.5-3.9-1.5-3.9-1.7-.5-2.9-1.1-4-1.6.1.2.1.4-.1.5-.6.6-1.5.9-2.4.9-.9 0-1.9-.3-2.4-.9-.1-.1-.1-.3 0-.5-1.2.5-2.4 1.1-4.1 1.6 0 0-1.4.8-1.5 3.9h1v-1z' opacity='.15'/%3e%3cpath fill='%23FFC857' d='M8 9c-.7 0-1.4-.4-2-1 0 2.4-.8 2.6-.4 3 1.1 1.2 3.6 1.3 4.8 0 .4-.4-.3-.6-.4-3-.6.6-1.3 1-2 1z'/%3e%3cpath fill='%23E8A33D' d='M5.3 10.6c.1 0 .2-.1.3-.1-.1.2-.1.4 0 .5.1.1.3.3.5.4l.3-.1.2-.4v-.1c.1-.3.3-1 .4-2-.4-.3-.7-.5-1-.8 0 1.5-.3 2.1-.4 2.5-.1 0-.2.1-.3.1zM9.5 10.8l.1.5.3.1c.2-.1.3-.2.5-.4.1-.1.1-.3.1-.5-.1-.4-.4-1-.4-2.5-.3.3-.6.5-1 .7.1 1 .3 1.6.4 2v.1z'/%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='%23E8A33D' d='M8.4 1c1.1 0 2 .8 2 1.9v2.2C10.4 6.2 9.1 8 8 8S5.6 6.2 5.6 5.1V2.9c0-1 .9-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'/%3e%3c/svg%3e");
}

Sass Background Variable

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

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

Download