SVG Icons

Icons published on Pixabay:

The following icons were published on Pixabay. These preview images are PNG graphics provided by Pixabay. Click on a preview to get to Pixabay's detail page for that image where you can download the SVG version. (Select the SVG radio button before hitting the download button.)

SVG icons not published on Pixabay:

License: CC0 (as well)

Flat icons for feedback in web apps

Yellow warning sign, white exclamation mark on yellow triangle

Red warning sign, white exclamation mark on red triangle

For alternative, script-generated and optionally animated icons also refer to: ProgressPieSVG's content plug-ins

Grey icons für colored background

These icons feature a dark semi-transparent background (color black with alpha channel) and are designed to be placed on top of a colored background, in a rather light color, which gets darkened by this icon's background shape, setting apart the white foreground with great contrast.

SMIL-animated busy-indicators

For alternative (script-generated) animated “busy indicators” also refer to: ProgressPieSVG

Icons for external links and pop-up links

These may be added to links automatically simply by CSS like the following example:

@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);
  }
}

Regarding accessibility, this example actually adds two kinds of content: A text, which is effectively rendered invisible for seeing users, but may be read out by screen readers, and a background image for seeing users.

Scalable Vector Graphics