overlay-external-link
Introduced in v1.0.0
Available in TYPO3
7.6 8.6 9.5 10.4 11.5
Usage
Markup
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><g><path fill="#666" d="M8.05 0c-.705 0-1.369.276-1.87.776L4.823 2.134a2.628 2.628 0 0 0-.77 1.913h-.049c-.705 0-1.369.276-1.869.776L.776 6.18A2.632 2.632 0 0 0 0 8.05c0 .705.276 1.369.777 1.869l.305.305c.5.5 1.164.776 1.869.776.705 0 1.369-.276 1.869-.776l1.358-1.358a2.63 2.63 0 0 0 .77-1.918l.059.001c.702 0 1.362-.274 1.859-.771l1.358-1.358a2.645 2.645 0 0 0 0-3.738L9.919.776A2.63 2.63 0 0 0 8.05 0z"/><path fill="#DDD" d="M8.05 1c-.42 0-.84.161-1.162.483L5.53 2.841a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305A1.638 1.638 0 0 0 8.05 1zm-.125.766c.298-.015.639.123.913.396.437.437.527 1.05.202 1.377L7.587 4.992c-.326.326-.941.237-1.378-.2s-.526-1.051-.2-1.378L7.461 1.96a.69.69 0 0 1 .464-.194zM4.003 5.047c-.42 0-.84.161-1.162.483L1.483 6.887a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0L5.47 8.159a1.64 1.64 0 0 0 0-2.324l-.305-.305a1.64 1.64 0 0 0-1.162-.483zm-.126.766c.298-.015.64.123.914.396.437.437.526 1.051.2 1.378L3.538 9.04c-.326.326-.94.236-1.377-.201-.437-.437-.527-1.051-.201-1.377l1.453-1.453a.69.69 0 0 1 .464-.196z"/><path fill="#212121" d="m5.529 5.166.305.305c.234.234.521.381.821.444l.899-.899c-.333.293-.922.2-1.347-.224.217-.141-.782.138-.678.374zM5.169 5.532l.305.305c.234.234.381.521.444.821l-.899.899c.293-.333.2-.923-.224-1.347-.142.217.136-.782.374-.678z" opacity=".3"/><path fill="#FFF" d="m3.452 6.496 3.049-3.049c.175-.175.553-.081.843.209.29.29.384.668.209.843L4.504 7.548c-.175.175-.553.081-.843-.209-.29-.29-.384-.668-.209-.843z"/></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"><path fill="#EFEFEF" d="M2 0v16h12V4l-4-4H2z"/><path fill="#FFF" d="M10 4V0l4 4h-4z" opacity=".65"/><path fill="#212121" d="M13 5v5L9 5h4z" opacity=".2"/><path fill="#999" d="M2 0v16h12V4l-4-4H2zm1 1h6v4h4v10H3V1zm7 .4L12.6 4H10V1.4z"/></svg>
</span>
<span class="icon-overlay">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><g><path fill="#666" d="M8.05 0c-.705 0-1.369.276-1.87.776L4.823 2.134a2.628 2.628 0 0 0-.77 1.913h-.049c-.705 0-1.369.276-1.869.776L.776 6.18A2.632 2.632 0 0 0 0 8.05c0 .705.276 1.369.777 1.869l.305.305c.5.5 1.164.776 1.869.776.705 0 1.369-.276 1.869-.776l1.358-1.358a2.63 2.63 0 0 0 .77-1.918l.059.001c.702 0 1.362-.274 1.859-.771l1.358-1.358a2.645 2.645 0 0 0 0-3.738L9.919.776A2.63 2.63 0 0 0 8.05 0z"/><path fill="#DDD" d="M8.05 1c-.42 0-.84.161-1.162.483L5.53 2.841a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305A1.638 1.638 0 0 0 8.05 1zm-.125.766c.298-.015.639.123.913.396.437.437.527 1.05.202 1.377L7.587 4.992c-.326.326-.941.237-1.378-.2s-.526-1.051-.2-1.378L7.461 1.96a.69.69 0 0 1 .464-.194zM4.003 5.047c-.42 0-.84.161-1.162.483L1.483 6.887a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0L5.47 8.159a1.64 1.64 0 0 0 0-2.324l-.305-.305a1.64 1.64 0 0 0-1.162-.483zm-.126.766c.298-.015.64.123.914.396.437.437.526 1.051.2 1.378L3.538 9.04c-.326.326-.94.236-1.377-.201-.437-.437-.527-1.051-.201-1.377l1.453-1.453a.69.69 0 0 1 .464-.196z"/><path fill="#212121" d="m5.529 5.166.305.305c.234.234.521.381.821.444l.899-.899c-.333.293-.922.2-1.347-.224.217-.141-.782.138-.678.374zM5.169 5.532l.305.305c.234.234.381.521.444.821l-.899.899c.293-.333.2-.923-.224-1.347-.142.217.136-.782.374-.678z" opacity=".3"/><path fill="#FFF" d="m3.452 6.496 3.049-3.049c.175-.175.553-.081.843.209.29.29.384.668.209.843L4.504 7.548c-.175.175-.553.081-.843-.209-.29-.29-.384-.668-.209-.843z"/></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" /></svg>
</span>
<span class="icon-overlay">
<svg role="img"><use xlink:href="dist/sprites/overlay.svg#overlay-external-link" /></svg>
</span>
</span>TYPO3 ViewHelper
<core:icon identifier="apps-pagetree-page" overlay="overlay-external-link" 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 11 11'%3e%3cg%3e%3cpath fill='%23666' d='M8.05 0c-.705 0-1.369.276-1.87.776L4.823 2.134a2.628 2.628 0 0 0-.77 1.913h-.049c-.705 0-1.369.276-1.869.776L.776 6.18A2.632 2.632 0 0 0 0 8.05c0 .705.276 1.369.777 1.869l.305.305c.5.5 1.164.776 1.869.776.705 0 1.369-.276 1.869-.776l1.358-1.358a2.63 2.63 0 0 0 .77-1.918l.059.001c.702 0 1.362-.274 1.859-.771l1.358-1.358a2.645 2.645 0 0 0 0-3.738L9.919.776A2.63 2.63 0 0 0 8.05 0z'/%3e%3cpath fill='%23DDD' d='M8.05 1c-.42 0-.84.161-1.162.483L5.53 2.841a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305A1.638 1.638 0 0 0 8.05 1zm-.125.766c.298-.015.639.123.913.396.437.437.527 1.05.202 1.377L7.587 4.992c-.326.326-.941.237-1.378-.2s-.526-1.051-.2-1.378L7.461 1.96a.69.69 0 0 1 .464-.194zM4.003 5.047c-.42 0-.84.161-1.162.483L1.483 6.887a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0L5.47 8.159a1.64 1.64 0 0 0 0-2.324l-.305-.305a1.64 1.64 0 0 0-1.162-.483zm-.126.766c.298-.015.64.123.914.396.437.437.526 1.051.2 1.378L3.538 9.04c-.326.326-.94.236-1.377-.201-.437-.437-.527-1.051-.201-1.377l1.453-1.453a.69.69 0 0 1 .464-.196z'/%3e%3cpath fill='%23212121' d='m5.529 5.166.305.305c.234.234.521.381.821.444l.899-.899c-.333.293-.922.2-1.347-.224.217-.141-.782.138-.678.374zM5.169 5.532l.305.305c.234.234.381.521.444.821l-.899.899c.293-.333.2-.923-.224-1.347-.142.217.136-.782.374-.678z' opacity='.3'/%3e%3cpath fill='%23FFF' d='m3.452 6.496 3.049-3.049c.175-.175.553-.081.843.209.29.29.384.668.209.843L4.504 7.548c-.175.175-.553.081-.843-.209-.29-.29-.384-.668-.209-.843z'/%3e%3c/g%3e%3c/svg%3e");
}Sass Background Variable
@import "@typo3/icons/dist/icons.scss";
@import "@typo3/icons/dist/scss/icons-variables-overlay.scss";
.myclass {
background-size: 1em 1em;
background-image: $icon-overlay-external-link;
}