apps-pagetree-page-frontend-users-root
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="2 -3 16 16"><g><circle cx="10" cy="5" r="8" fill="#59F"/><path fill="#AAD400" d="M16.973 4.378a7.034 7.034 0 0 0-3.545-5.48c-.092.097-.117.04-.117.137-.277.097-.646-.097-.923-.194a3.23 3.23 0 0 0-2.122-.097c-.277.097-.922.194-.646.776.184.292.645.583 1.107.195.184-.194.37-.485.645-.194.093.098.093.195.093.292-.093.29-.37.388-.646.388-.37.097-.74 0-1.108.097-.37.097-.923.194-.923.68 0 .58-.185.678-.647.775-.37 0-.553.194-.37.582.093.29.37.29.555.194.738-.388 1.384-1.358 2.214-.194l.184-.097c.185-.776.37-.29.554 0l.277.29c1.107-1.066.83.486 1.2.776-.74-.194-1.57.582-2.215.097-1.107-.872-1.845-.484-2.86.388-.83.68-1.015 1.552-.83 2.328.276.97 1.29 1.067 2.122.873.276-.098.83-.098.83.096-.185.873.83 1.455.46 2.424-.276.776.186 1.746.83 2.037.647.29 1.2-.485 1.478-1.164.092-.097 0-.29.092-.388.738-.97.646-2.424 1.568-3.394.277-.29 1.2-1.357.46-2.23 1.754-.485 1.11 1.26 1.478 2.037.276-.582.46-1.164.645-1.65.092-.29.16-.38.16-.38zM6.948-.79c.29-.306.303-.356.594-.765A6.738 6.738 0 0 0 5.619-.456l.168.177h.873s.097 0 .097-.1l.097-.103s.097 0 .097-.102l.096-.102.097-.103c-.29.205-.29.103-.194 0 0 .103 0 .103 0 0 0 .103 0 0 0 0L6.948-.79zM5.666 8.65s-.096-.092 0 0c-.096-.092-.096-.092 0 0v-.276l-.096-.092c-.095 0-.095-.093-.19-.093s-.19-.093-.286-.093h-.191s-.095 0-.095-.092c-.668-.37-.953-1.015-1.144-1.752 0-.185-.095-.37-.095-.554-.094-.093-.094-.185-.19-.278-.19-.184-.094-.553.096-.922v-.184c0-.093 0-.093.095-.185 0-.09 0-.09.096-.183.19-.37.572-.646.762-.923.095-.092.095-.092.095-.184v-.092c.095-.092.095-.277.19-.37 0-.09.096-.276.096-.368 0-.185 0-.277-.096-.46-.096-.278-.154-.518-.344-.703-.858 1.2-1.37 2.546-1.37 4.113 0 2.123.903 4.006 2.414 5.324 0 0 .061.026.061-.064v-.094c0-.092.095-.092.095-.184.096-.37.096-.922.097-1.291z"/><path fill="#212121" d="M10 13c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm0-15C6.14-2 3 1.14 3 5c0 3.859 3.14 7 7 7 3.859 0 7-3.141 7-7 0-3.86-3.141-7-7-7z" opacity=".2"/></g><g><path fill="#666" d="M14.15 2h-.3c-1.172 0-2.125.937-2.125 2.088v.825c0 .434.161.91.438 1.33a6.483 6.483 0 0 1-.875.333l-.117.033-.105.06c-.169.097-1.012.693-1.065 2.331L10 12h8V9c-.053-1.638-.897-2.234-1.066-2.331l-.105-.06-.117-.033a6.432 6.432 0 0 1-.875-.333c.277-.42.438-.897.438-1.33v-.825C16.276 2.937 15.322 2 14.15 2z"/><path fill="#FFC857" d="M16.438 7.538c-.637-.182-1.081-.432-1.525-.601-.049-.138-.153-.381-.164-.934.307-.305.527-.74.527-1.09v-.825c0-.6-.526-1.088-1.126-1.088h-.3c-.6 0-1.125.488-1.125 1.088v.825c0 .35.22.785.527 1.09-.01.553-.114.796-.164.934-.444.169-.888.419-1.525.601 0 0-.525.3-.562 1.462v1h6V9c-.039-1.162-.563-1.462-.563-1.462z"/><path fill="#AAD400" d="M16.438 7.538c-.633-.181-1.075-.428-1.515-.598.027.087.031.131-.022.185-.45.488-1.388.45-1.8 0-.055-.055-.044-.099-.011-.189-.444.169-.888.419-1.526.602 0 0-.525.3-.562 1.462v2h6V9c-.04-1.2-.564-1.462-.564-1.462z"/><path fill="#666" d="M11.15 4h-.3c-1.172 0-2.126.937-2.126 2.088v.825c0 .434.161.91.438 1.33a6.432 6.432 0 0 1-.875.333l-.117.033-.105.06c-.168.097-1.011.693-1.064 2.331L7 13h8v-2c-.053-1.638-.897-2.234-1.066-2.331l-.105-.06-.117-.033a6.432 6.432 0 0 1-.875-.333c.277-.42.438-.897.438-1.33v-.825C13.276 4.937 12.322 4 11.15 4z"/><path fill="#FFC857" d="M13.438 9.538c-.637-.182-1.081-.432-1.525-.601-.049-.138-.153-.381-.164-.934.307-.305.527-.74.527-1.09v-.825c0-.6-.526-1.088-1.126-1.088h-.3c-.6 0-1.125.488-1.125 1.088v.825c0 .35.22.785.527 1.09-.01.553-.114.796-.164.934-.444.169-.888.419-1.525.601 0 0-.525.3-.562 1.462v1h6v-1c-.039-1.162-.563-1.462-.563-1.462z"/><path fill="#79A548" d="M13.438 9.538c-.633-.181-1.075-.428-1.515-.598.027.087.031.131-.022.185-.45.488-1.388.45-1.8 0-.055-.055-.044-.099-.011-.189-.444.169-.888.419-1.526.602 0 0-.525.3-.562 1.462v1h6v-1c-.04-1.2-.564-1.462-.564-1.462z"/></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="2 -3 16 16"><g><circle cx="10" cy="5" r="8" fill="#59F"/><path fill="#AAD400" d="M16.973 4.378a7.034 7.034 0 0 0-3.545-5.48c-.092.097-.117.04-.117.137-.277.097-.646-.097-.923-.194a3.23 3.23 0 0 0-2.122-.097c-.277.097-.922.194-.646.776.184.292.645.583 1.107.195.184-.194.37-.485.645-.194.093.098.093.195.093.292-.093.29-.37.388-.646.388-.37.097-.74 0-1.108.097-.37.097-.923.194-.923.68 0 .58-.185.678-.647.775-.37 0-.553.194-.37.582.093.29.37.29.555.194.738-.388 1.384-1.358 2.214-.194l.184-.097c.185-.776.37-.29.554 0l.277.29c1.107-1.066.83.486 1.2.776-.74-.194-1.57.582-2.215.097-1.107-.872-1.845-.484-2.86.388-.83.68-1.015 1.552-.83 2.328.276.97 1.29 1.067 2.122.873.276-.098.83-.098.83.096-.185.873.83 1.455.46 2.424-.276.776.186 1.746.83 2.037.647.29 1.2-.485 1.478-1.164.092-.097 0-.29.092-.388.738-.97.646-2.424 1.568-3.394.277-.29 1.2-1.357.46-2.23 1.754-.485 1.11 1.26 1.478 2.037.276-.582.46-1.164.645-1.65.092-.29.16-.38.16-.38zM6.948-.79c.29-.306.303-.356.594-.765A6.738 6.738 0 0 0 5.619-.456l.168.177h.873s.097 0 .097-.1l.097-.103s.097 0 .097-.102l.096-.102.097-.103c-.29.205-.29.103-.194 0 0 .103 0 .103 0 0 0 .103 0 0 0 0L6.948-.79zM5.666 8.65s-.096-.092 0 0c-.096-.092-.096-.092 0 0v-.276l-.096-.092c-.095 0-.095-.093-.19-.093s-.19-.093-.286-.093h-.191s-.095 0-.095-.092c-.668-.37-.953-1.015-1.144-1.752 0-.185-.095-.37-.095-.554-.094-.093-.094-.185-.19-.278-.19-.184-.094-.553.096-.922v-.184c0-.093 0-.093.095-.185 0-.09 0-.09.096-.183.19-.37.572-.646.762-.923.095-.092.095-.092.095-.184v-.092c.095-.092.095-.277.19-.37 0-.09.096-.276.096-.368 0-.185 0-.277-.096-.46-.096-.278-.154-.518-.344-.703-.858 1.2-1.37 2.546-1.37 4.113 0 2.123.903 4.006 2.414 5.324 0 0 .061.026.061-.064v-.094c0-.092.095-.092.095-.184.096-.37.096-.922.097-1.291z"/><path fill="#212121" d="M10 13c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm0-15C6.14-2 3 1.14 3 5c0 3.859 3.14 7 7 7 3.859 0 7-3.141 7-7 0-3.86-3.141-7-7-7z" opacity=".2"/></g><g><path fill="#666" d="M14.15 2h-.3c-1.172 0-2.125.937-2.125 2.088v.825c0 .434.161.91.438 1.33a6.483 6.483 0 0 1-.875.333l-.117.033-.105.06c-.169.097-1.012.693-1.065 2.331L10 12h8V9c-.053-1.638-.897-2.234-1.066-2.331l-.105-.06-.117-.033a6.432 6.432 0 0 1-.875-.333c.277-.42.438-.897.438-1.33v-.825C16.276 2.937 15.322 2 14.15 2z"/><path fill="#FFC857" d="M16.438 7.538c-.637-.182-1.081-.432-1.525-.601-.049-.138-.153-.381-.164-.934.307-.305.527-.74.527-1.09v-.825c0-.6-.526-1.088-1.126-1.088h-.3c-.6 0-1.125.488-1.125 1.088v.825c0 .35.22.785.527 1.09-.01.553-.114.796-.164.934-.444.169-.888.419-1.525.601 0 0-.525.3-.562 1.462v1h6V9c-.039-1.162-.563-1.462-.563-1.462z"/><path fill="#AAD400" d="M16.438 7.538c-.633-.181-1.075-.428-1.515-.598.027.087.031.131-.022.185-.45.488-1.388.45-1.8 0-.055-.055-.044-.099-.011-.189-.444.169-.888.419-1.526.602 0 0-.525.3-.562 1.462v2h6V9c-.04-1.2-.564-1.462-.564-1.462z"/><path fill="#666" d="M11.15 4h-.3c-1.172 0-2.126.937-2.126 2.088v.825c0 .434.161.91.438 1.33a6.432 6.432 0 0 1-.875.333l-.117.033-.105.06c-.168.097-1.011.693-1.064 2.331L7 13h8v-2c-.053-1.638-.897-2.234-1.066-2.331l-.105-.06-.117-.033a6.432 6.432 0 0 1-.875-.333c.277-.42.438-.897.438-1.33v-.825C13.276 4.937 12.322 4 11.15 4z"/><path fill="#FFC857" d="M13.438 9.538c-.637-.182-1.081-.432-1.525-.601-.049-.138-.153-.381-.164-.934.307-.305.527-.74.527-1.09v-.825c0-.6-.526-1.088-1.126-1.088h-.3c-.6 0-1.125.488-1.125 1.088v.825c0 .35.22.785.527 1.09-.01.553-.114.796-.164.934-.444.169-.888.419-1.525.601 0 0-.525.3-.562 1.462v1h6v-1c-.039-1.162-.563-1.462-.563-1.462z"/><path fill="#79A548" d="M13.438 9.538c-.633-.181-1.075-.428-1.515-.598.027.087.031.131-.022.185-.45.488-1.388.45-1.8 0-.055-.055-.044-.099-.011-.189-.444.169-.888.419-1.526.602 0 0-.525.3-.562 1.462v1h6v-1c-.04-1.2-.564-1.462-.564-1.462z"/></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/apps.svg#apps-pagetree-page-frontend-users-root" /></svg>
</span>
</span>TYPO3 ViewHelper
<core:icon identifier="apps-pagetree-page-frontend-users-root" 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='2 -3 16 16'%3e%3cg%3e%3ccircle cx='10' cy='5' r='8' fill='%2359F'/%3e%3cpath fill='%23AAD400' d='M16.973 4.378a7.034 7.034 0 0 0-3.545-5.48c-.092.097-.117.04-.117.137-.277.097-.646-.097-.923-.194a3.23 3.23 0 0 0-2.122-.097c-.277.097-.922.194-.646.776.184.292.645.583 1.107.195.184-.194.37-.485.645-.194.093.098.093.195.093.292-.093.29-.37.388-.646.388-.37.097-.74 0-1.108.097-.37.097-.923.194-.923.68 0 .58-.185.678-.647.775-.37 0-.553.194-.37.582.093.29.37.29.555.194.738-.388 1.384-1.358 2.214-.194l.184-.097c.185-.776.37-.29.554 0l.277.29c1.107-1.066.83.486 1.2.776-.74-.194-1.57.582-2.215.097-1.107-.872-1.845-.484-2.86.388-.83.68-1.015 1.552-.83 2.328.276.97 1.29 1.067 2.122.873.276-.098.83-.098.83.096-.185.873.83 1.455.46 2.424-.276.776.186 1.746.83 2.037.647.29 1.2-.485 1.478-1.164.092-.097 0-.29.092-.388.738-.97.646-2.424 1.568-3.394.277-.29 1.2-1.357.46-2.23 1.754-.485 1.11 1.26 1.478 2.037.276-.582.46-1.164.645-1.65.092-.29.16-.38.16-.38zM6.948-.79c.29-.306.303-.356.594-.765A6.738 6.738 0 0 0 5.619-.456l.168.177h.873s.097 0 .097-.1l.097-.103s.097 0 .097-.102l.096-.102.097-.103c-.29.205-.29.103-.194 0 0 .103 0 .103 0 0 0 .103 0 0 0 0L6.948-.79zM5.666 8.65s-.096-.092 0 0c-.096-.092-.096-.092 0 0v-.276l-.096-.092c-.095 0-.095-.093-.19-.093s-.19-.093-.286-.093h-.191s-.095 0-.095-.092c-.668-.37-.953-1.015-1.144-1.752 0-.185-.095-.37-.095-.554-.094-.093-.094-.185-.19-.278-.19-.184-.094-.553.096-.922v-.184c0-.093 0-.093.095-.185 0-.09 0-.09.096-.183.19-.37.572-.646.762-.923.095-.092.095-.092.095-.184v-.092c.095-.092.095-.277.19-.37 0-.09.096-.276.096-.368 0-.185 0-.277-.096-.46-.096-.278-.154-.518-.344-.703-.858 1.2-1.37 2.546-1.37 4.113 0 2.123.903 4.006 2.414 5.324 0 0 .061.026.061-.064v-.094c0-.092.095-.092.095-.184.096-.37.096-.922.097-1.291z'/%3e%3cpath fill='%23212121' d='M10 13c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm0-15C6.14-2 3 1.14 3 5c0 3.859 3.14 7 7 7 3.859 0 7-3.141 7-7 0-3.86-3.141-7-7-7z' opacity='.2'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23666' d='M14.15 2h-.3c-1.172 0-2.125.937-2.125 2.088v.825c0 .434.161.91.438 1.33a6.483 6.483 0 0 1-.875.333l-.117.033-.105.06c-.169.097-1.012.693-1.065 2.331L10 12h8V9c-.053-1.638-.897-2.234-1.066-2.331l-.105-.06-.117-.033a6.432 6.432 0 0 1-.875-.333c.277-.42.438-.897.438-1.33v-.825C16.276 2.937 15.322 2 14.15 2z'/%3e%3cpath fill='%23FFC857' d='M16.438 7.538c-.637-.182-1.081-.432-1.525-.601-.049-.138-.153-.381-.164-.934.307-.305.527-.74.527-1.09v-.825c0-.6-.526-1.088-1.126-1.088h-.3c-.6 0-1.125.488-1.125 1.088v.825c0 .35.22.785.527 1.09-.01.553-.114.796-.164.934-.444.169-.888.419-1.525.601 0 0-.525.3-.562 1.462v1h6V9c-.039-1.162-.563-1.462-.563-1.462z'/%3e%3cpath fill='%23AAD400' d='M16.438 7.538c-.633-.181-1.075-.428-1.515-.598.027.087.031.131-.022.185-.45.488-1.388.45-1.8 0-.055-.055-.044-.099-.011-.189-.444.169-.888.419-1.526.602 0 0-.525.3-.562 1.462v2h6V9c-.04-1.2-.564-1.462-.564-1.462z'/%3e%3cpath fill='%23666' d='M11.15 4h-.3c-1.172 0-2.126.937-2.126 2.088v.825c0 .434.161.91.438 1.33a6.432 6.432 0 0 1-.875.333l-.117.033-.105.06c-.168.097-1.011.693-1.064 2.331L7 13h8v-2c-.053-1.638-.897-2.234-1.066-2.331l-.105-.06-.117-.033a6.432 6.432 0 0 1-.875-.333c.277-.42.438-.897.438-1.33v-.825C13.276 4.937 12.322 4 11.15 4z'/%3e%3cpath fill='%23FFC857' d='M13.438 9.538c-.637-.182-1.081-.432-1.525-.601-.049-.138-.153-.381-.164-.934.307-.305.527-.74.527-1.09v-.825c0-.6-.526-1.088-1.126-1.088h-.3c-.6 0-1.125.488-1.125 1.088v.825c0 .35.22.785.527 1.09-.01.553-.114.796-.164.934-.444.169-.888.419-1.525.601 0 0-.525.3-.562 1.462v1h6v-1c-.039-1.162-.563-1.462-.563-1.462z'/%3e%3cpath fill='%2379A548' d='M13.438 9.538c-.633-.181-1.075-.428-1.515-.598.027.087.031.131-.022.185-.45.488-1.388.45-1.8 0-.055-.055-.044-.099-.011-.189-.444.169-.888.419-1.526.602 0 0-.525.3-.562 1.462v1h6v-1c-.04-1.2-.564-1.462-.564-1.462z'/%3e%3c/g%3e%3c/svg%3e");
}Sass Background Variable
@import "@typo3/icons/dist/icons.scss";
@import "@typo3/icons/dist/scss/icons-variables-apps.scss";
.myclass {
background-size: 1em 1em;
background-image: $icon-apps-pagetree-page-frontend-users-root;
}