SVG-Icons

Auf Pixabay veröffentlichte Icons:

Die folgenden Icons wurden über Pixabay veröffentlicht. Diese Vorschaubilder sind PNGs von Pixabay. Klicken Sie ein Icon an, um auf die Pixabay-Detailseite des Bildes zu gelangen. Dort können Sie das Icon dann auch im SVG-Format herunterladen. (Vergessen Sie dazu nicht, über dem Download-Button die SVG-Radiobox zu markieren.)

Nicht auf Pixabay veröffentlichte SVGs:

Lizenz: Ebenfalls Creative Commons CC0

„Flat Icons“ z.B. für Feedback in Webapplikationen

Für alternative (scriptgenerierte), ggf. sogar animiert aufgebaute Anzeigen dieser Art siehe auch: ProgressPieSVG unter »Content-Plug-ins«

Graue Icons für farbigen Hintergrund

Halbtransparent grauer Hintergrund (Schwarz mit Alpha-Kanal), vorgesehen dazu, auf relativ hellen, farbigen Hintergrund gelegt zu werden, auf welchem sich dadurch ein verdunkelter Hintergrund (Kreis) abzeichnet, auf welchem der weiße Vordergrund hinreichend Kontrast bietet.

SMIL-animierte Warteanzeigen

Für alternative (scriptgenerierte) animierte „Warte-Anzeigen“ siehe auch: ProgressPieSVG

Icons für Kennzeichnung externer Links oder Popup-Links

Eine Einbindung für externe Links per CSS kann z.B. folgenermaßen aussehen:

@media screen {
  a:not(.raw-style)[href^="http://"]:not([href*="isg-software.de"])::after,
  a:not(.raw-style)[href^="https://"]:not([href*="isg-software.de"])::after {
    content: '(Externer Link)';
    width: 1.2em;
    height: 0.9em;
    display: inline-block;
    overflow: hidden;
    background-image: url(external-link.svg);
    background-repeat: no-repeat;
    background-size: 0.8em 0.8em;
    background-position: right bottom;
    color: rgba(0, 0, 0, 0);
  }
}

Im Sinne der Barrierefreiheit legt diese Variante gleich zwei Inhalte für das Pseudo-Element ::after fest: Einen Text, der absichtlich unsichtbar gehalten wird, aber von Screen-Readern vorgelesen werden kann, und obigem Icon als Hintergrundgrafik für sehende Nutzer.

Skalierbare Vektorgrafiken