SVG Icons

Scalable Vector Graphics

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

OK Icon, white tick on green circle Error Icon, white cross on red circle No Entry Icon, white horizontal bar on red circle Info Icon, white lower-case letter i on blue circle Yellow warning sign, white exclamation mark on yellow triangle Red warning sign, white exclamation mark on red triangle close icon

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.

OK Icon Error Icon No Entry Icon Tools Icon: Screwdriver and wrench crossed in the shape of an X Warning Icon: Exclamation mark on triangle Confirmation Icon: Question mark on triangle Info Icon: lower-case letter i on circle

SMIL-animated busy-indicators

Wait indicator simple Wait indicator clock

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

Icons for external links and pop-up links

Icon for external link Icon for popup link

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.

^