module-site-settings
Introduced in v4.3.0
Usage
Markup
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="#439b92" d="M0 0h64v64H0z"/><g opacity=".75"><rect width="40" height="8" x="12" y="42" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M14 44h36v4H14z" opacity=".5"/><path fill="#439b92" d="M20 42h10v8H20z" opacity=".75"/><rect width="6" height="12" x="22" y="40" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M24 42h2v8h-2z" opacity=".75"/></g><g><rect width="40" height="8" x="12" y="28" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M14 30h36v4H14z" opacity=".5"/><path fill="#439b92" d="M36 28h10v8H36z" opacity=".75"/><rect width="6" height="12" x="38" y="26" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M40 28h2v8h-2z"/></g><g opacity=".75"><rect width="40" height="8" x="12" y="14" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M14 16h36v4H14z" opacity=".5"/><path fill="#439b92" d="M28 14h10v8H28z" opacity=".75"/><rect width="6" height="12" x="30" y="12" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M32 14h2v8h-2z" opacity=".75"/></g></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"><g><path fill="#439b92" d="M0 0h64v64H0z"/><g opacity=".75"><rect width="40" height="8" x="12" y="42" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M14 44h36v4H14z" opacity=".5"/><path fill="#439b92" d="M20 42h10v8H20z" opacity=".75"/><rect width="6" height="12" x="22" y="40" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M24 42h2v8h-2z" opacity=".75"/></g><g><rect width="40" height="8" x="12" y="28" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M14 30h36v4H14z" opacity=".5"/><path fill="#439b92" d="M36 28h10v8H36z" opacity=".75"/><rect width="6" height="12" x="38" y="26" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M40 28h2v8h-2z"/></g><g opacity=".75"><rect width="40" height="8" x="12" y="14" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M14 16h36v4H14z" opacity=".5"/><path fill="#439b92" d="M28 14h10v8H28z" opacity=".75"/><rect width="6" height="12" x="30" y="12" fill="#fff" rx="2" ry="2"/><path fill="#439b92" d="M32 14h2v8h-2z" opacity=".75"/></g></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-site-settings" /></svg>
</span>
</span>TYPO3 ViewHelper
<core:icon identifier="module-site-settings" 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%3cg%3e%3cpath fill='%23439b92' d='M0 0h64v64H0z'/%3e%3cg opacity='.75'%3e%3crect width='40' height='8' x='12' y='42' fill='%23fff' rx='2' ry='2'/%3e%3cpath fill='%23439b92' d='M14 44h36v4H14z' opacity='.5'/%3e%3cpath fill='%23439b92' d='M20 42h10v8H20z' opacity='.75'/%3e%3crect width='6' height='12' x='22' y='40' fill='%23fff' rx='2' ry='2'/%3e%3cpath fill='%23439b92' d='M24 42h2v8h-2z' opacity='.75'/%3e%3c/g%3e%3cg%3e%3crect width='40' height='8' x='12' y='28' fill='%23fff' rx='2' ry='2'/%3e%3cpath fill='%23439b92' d='M14 30h36v4H14z' opacity='.5'/%3e%3cpath fill='%23439b92' d='M36 28h10v8H36z' opacity='.75'/%3e%3crect width='6' height='12' x='38' y='26' fill='%23fff' rx='2' ry='2'/%3e%3cpath fill='%23439b92' d='M40 28h2v8h-2z'/%3e%3c/g%3e%3cg opacity='.75'%3e%3crect width='40' height='8' x='12' y='14' fill='%23fff' rx='2' ry='2'/%3e%3cpath fill='%23439b92' d='M14 16h36v4H14z' opacity='.5'/%3e%3cpath fill='%23439b92' d='M28 14h10v8H28z' opacity='.75'/%3e%3crect width='6' height='12' x='30' y='12' fill='%23fff' rx='2' ry='2'/%3e%3cpath fill='%23439b92' d='M32 14h2v8h-2z' opacity='.75'/%3e%3c/g%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-site-settings;
}