Can I change the colour of an SVG element?

Yes. Recolour one element or the whole grid on the page. You can also adjust stroke width, size, opacity and rotation.

How can I use these elements on a website?

You can copy the SVG code, export CSS as a background-image or mask-image data URI, or export a React component.

Can I use a free element on a commercial website?

Free accounts can use free items for personal projects. Pro and Max accounts get a commercial licence for items they download, and the licence stays in place.

Free website SVG elements

300 SVGs

Search the library

Browse free SVG elements for website layouts. Use them to add detail to a header, frame a card, mark a section break or build a landing page. Each item is real SVG code, made by our own models and checked by a judge before publication. Icons use currentColor, so they can take the colour of the text around them.

You can recolour an element or the whole grid on this page. You can also change stroke width, size, opacity and rotation. When it is ready, copy the SVG code or export CSS, PNG, WebP, JPG, a React component or a data URI. Packs download as a ZIP.

Shape dividers11 Buttons21 Blobs24 Dots and grids24 Frames18 Horizontal rules7 Bullets24 Quotation marks22 Cursors24 Loaders22 Ribbons and banners13 Star ratings8 Underlines18 Hand-drawn arrows21 Speech bubbles22 Avatars21

Line421 Flat1288 Pixel art42

Packs

Sets drawn in one style.

Underlines, flat

18 SVGs · Free 11 · Premium 7

Star ratings, flat

8 SVGs · Free 3 · Premium 5

Speech Bubbles, Flat

22 SVGs · Free 14 · Premium 8

Shape dividers, flat

11 SVGs · Free 7 · Premium 4

Ribbons and Banners, Flat

13 SVGs · Free 8 · Premium 5

Quotation Marks, Flat

22 SVGs · Free 13 · Premium 9

Loaders elements, flat

22 SVGs · Free 15 · Premium 7

Horizontal Rules, Flat

7 SVGs · Free 4 · Premium 3

Not what you need?

Describe it: the SVG studio opens with this style filled in.

Also in the library

Questions

Can I change the colour of an SVG element?: Yes. Recolour one element or the whole grid on the page. You can also adjust stroke width, size, opacity and rotation.
How can I use these elements on a website?: You can copy the SVG code, export CSS as a background-image or mask-image data URI, or export a React component.
Can I use a free element on a commercial website?: Free accounts can use free items for personal projects. Pro and Max accounts get a commercial licence for items they download, and the licence stays in place.