Website Graphics

In the last 5-10 years, SVG graphics have become much more popular. SVGs are small in file size and can be modified by CSS, making them ideal for use on websites over the traditional raster graphics such as the JPEG and PNG file formats.

Our website graphics give you the power of customization when it comes to designing HTML elements such as unordered list bullets, Blockquotes, div containers, cursors, and horizontal rules. You can also reach for an animated preloaders to easily show a loading state, or create curvy container shapes with our shape dividers. We have an entire section dedicated to SVG icons, the most popular type of website graphic.

The packs below include free website graphics and some member only SVG graphics.

Tutorials for Various Website Graphics

When we release website graphics, we typically also release tutorials on how to use the graphics. Below are some of the tutorials we have made:

Adding Animated Preloader Graphics to your website

One website graphic type that SVG handles better than any other file format is the animated preloader. In general, websites use CSS solutions or a bloated animated GIF. However our preloader website graphics are very small in file size, as well as easily customizable for speed, thickness, and color. In the tutorial, we show how use and make custom preloader graphics for your website. Watch animating preloaders with SVG.

How to add custom CSS cursors

In this website graphic tutorial, we use one line of CSS to add a custom SVG cursor design to display as the user’s cursor pointer. You can even specify the custom cursor to only show when hovering over a specific CTA button or other website and HTML elements. Watch custom cursor tutorial.

Create section separators or shape dividers

Divs and other HTML section containers are rectangular by default, often leaving a generic style that your see on websites everywhere. One way to creatively change up the shapes of sections is by reaching for shape dividers. We have both a set of graphics and a shape divider tool to generate the HTML and CSS needed to create these sections dividers.  Matt visiwig has 2 tutorials for using both methods to create sections with these website graphics: Easy Shape Dividers with CSS + SVG and The Best Shape Divider Tool.

Create custom horizontal rules (CSS and SVG)

In this tutorial, Matt Visiwig shows you how to override the <hr> (horizontal rule element) CSS with an SVG Background from the Horizontal Rules website graphics pack. Watch horizontal rule tutorial.