placeholder.pics

The lightest way to include placeholder pictures in your designs. All images are lovingly served up as sub-kilobyte, fully optimized Scalable Vector Graphics (SVG) in any size or color you need. You can even add a short label to keep track of what goes where in your designs and mockups.

Try it out

Optional
Optional
Optional
Optional, replaces image dimensions

Build your own URL

The placeholder.pics service uses a simple URL format to define the size, colours, and label used for your image. The format that image URLs must follow is:

  1. The URL must start with /svg/
  2. URLs that specify only a single dimension will be square, for example a request to /svg/100 will return an svg that is 100 pixels wide and 100 pixels high
  3. Width and height is specified via WIDTHxHEIGHT
    /svg/100x100
  4. Background color can be either a single 3 or 6 character hex color code, or a gradient by defining a start color and stop color with START-STOP
    /svg/100x100/888888
  5. Foreground text and border color can be specified as a single 3 or 6 character hex color code or two colors separated by a dash TEXT-BORDER. Background color must be defined in order to set a foreground color
    /svg/100x100/888888/EEE
  6. A label can be defined using the last part of the URL. Labels should be short and take into account the size of the image being requested. Foreground and background colors must be specified first when using a label
    /svg/100x100/888888/My Label