Für Icons bieten die Komponenten mit der Telekom-Icon eine eigene Schriftart. Diese Icons gibt es in der Variante Solid und Outline

Um das Einbinden der Icons zu vereinfachen, wird außerdem die CSS-Klasse .icon angeboten. Sie bringt die elementaren Einstellungen für ein Icon mit. Durch die zusätzliche Verwendung der klasse .icon-solid wird das Icon im Solid Stil angezeigt. Welches Icon verwendet wird, bestimmt eine weitere CSS-Klasse. Unter dem Beispiel sind alle Icons mit Klassenname aufgeführt. Zur Vereinfachung können Icons mit dem <span style=“white-space: nowrap”><i>-Tag</span> erzeugt werden:

Synchronisieren
<span class="sr-only">Synchronisieren</span>
  <i class="icon icon-synchronize" aria-hidden="true"></i>
Synchronisieren
<span class="sr-only">Synchronisieren</span>
  <i class="icon icon-solid icon-synchronize" aria-hidden="true"></i>
**Anmerkung Barrierefreiheit:** Icons werden von Unterstützungstechnologien oft nicht erkannt oder fehlerhaft interpretiert. Um das zu vermeiden ist es wichtig `aria-hidden="true"` auf die Icon-Tags anzuwenden, damit diese für Unterstützungstechnologien nicht mehr erkennbar werden.
Je nach Fall muss nun eine Alternative gefunden werden. So kann beschreibender Text mit CSS-Klasse `.sr-only` vor das Icon geschrieben werden, welcher dann nur von Unterstützungstechnologien erkannt wird.

Varianten