Menu

Beta
Sign in
Beta
Dotted Square SVG element, flat

Dotted Square SVG element, flat

Spaced dots form four equal sides around a centred square. Add it around an image placeholder in a wireframe or a writing prompt on a worksheet.

Free · from Dots and grids, flat · Set 2

Similar SVGs

More from Dots and grids, flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ARqjV_KJc_gv/amnt.svg" alt="Dotted Square" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="navy" data-name="Navy"><path d="M202 513c-29 3-22 48 6 44s21-47-6-44z" fill="#081d54" stroke="#081d54"/><path d="M814 686c-26 5-19 49 10 43 28-5 20-49-10-43z" fill="#081d54" stroke="#081d54"/><path d="M817 456c-29 3-22 48 6 44s21-47-6-44z" fill="#081d54" stroke="#081d54"/><path d="M818 513c-29 2-25 47 4 44 28-3 23-46-4-44z" fill="#081d54" stroke="#081d54"/><path d="M202 456c-28 3-23 47 5 44s23-47-5-44z" fill="#081d54" stroke="#081d54"/><path d="M815 571c-28 5-19 49 9 43s19-48-9-43z" fill="#081d54" stroke="#081d54"/><path d="M816 628c-28 4-21 48 8 43 28-4 19-46-8-43z" fill="#081d54" stroke="#081d54"/><path d="M201 628c-28 4-21 48 8 43 27-4 19-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M199 571c-27 6-17 49 10 43 28-6 18-49-10-43z" fill="#081d54" stroke="#081d54"/><path d="M817 743c-29 4-23 47 6 43 28-3 22-46-6-43z" fill="#081d54" stroke="#081d54"/><path d="M424 800c-28 4-20 48 8 43 28-4 20-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M649 800c-28 4-22 47 6 44 29-3 22-47-6-44z" fill="#081d54" stroke="#081d54"/><path d="M368 800c-28 5-20 48 8 43 28-4 20-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M203 342c-28 2-25 46 3 44 29-2 25-46-3-44z" fill="#081d54" stroke="#081d54"/><path d="M205 400c-29 0-28 44 0 43s27-43 0-43z" fill="#081d54" stroke="#081d54"/><path d="M820 400c-29 0-28 44 0 43s27-44 0-43z" fill="#081d54" stroke="#081d54"/><path d="M201 743c-28 4-21 48 8 43 27-4 19-46-8-43z" fill="#081d54" stroke="#081d54"/><path d="M312 800c-28 4-21 48 8 43 27-4 20-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M816 800c-28 4-20 48 8 43 28-4 19-46-8-43z" fill="#081d54" stroke="#081d54"/><path d="M257 800c-28 4-21 47 6 44 28-3 22-47-6-44z" fill="#081d54" stroke="#081d54"/><path d="M481 800c-28 4-21 47 6 44 29-3 22-47-6-44z" fill="#081d54" stroke="#081d54"/><path d="M536 800c-28 5-20 48 8 43 28-4 20-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M816 286c-28 4-21 47 7 43 28-3 21-46-7-43z" fill="#081d54" stroke="#081d54"/><path d="M200 686c-27 5-21 48 9 43 27-4 21-48-9-43z" fill="#081d54" stroke="#081d54"/><path d="M201 800c-28 4-21 47 7 43 28-3 21-46-7-43z" fill="#081d54" stroke="#081d54"/><path d="M814 343c-28 6-16 49 12 42 26-6 17-48-12-42z" fill="#081d54" stroke="#081d54"/><path d="M761 800c-28 4-21 47 6 44 28-3 22-47-6-44z" fill="#081d54" stroke="#081d54"/><path d="M199 230c-27 6-19 49 12 42 27-6 15-48-12-42z" fill="#081d54" stroke="#081d54"/><path d="M201 286c-28 4-21 47 7 43s21-47-7-43z" fill="#081d54" stroke="#081d54"/><path d="M593 800c-28 4-21 47 7 43 28-3 21-46-7-43z" fill="#081d54" stroke="#081d54"/><path d="M535 175c-27 5-20 48 10 43 28-6 17-48-10-43z" fill="#081d54" stroke="#081d54"/><path d="M706 800c-29 4-22 47 6 44s22-47-6-44z" fill="#081d54" stroke="#081d54"/><path d="M368 175c-28 5-20 47 8 43s20-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M815 230c-27 5-20 48 10 42 27-5 17-47-10-42z" fill="#081d54" stroke="#081d54"/><path d="M256 175c-28 4-20 47 8 43s20-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M200 175c-27 5-21 48 9 43 28-5 19-48-9-43z" fill="#081d54" stroke="#081d54"/><path d="M648 175c-28 5-19 48 9 43 27-5 18-47-9-43z" fill="#081d54" stroke="#081d54"/><path d="M815 175c-27 5-20 49 10 43 27-6 17-47-10-43z" fill="#081d54" stroke="#081d54"/><path d="M424 175c-28 4-20 47 8 43 28-5 20-47-8-43z" fill="#081d54" stroke="#081d54"/><path d="M759 175c-26 6-19 48 10 43 28-5 18-48-10-43z" fill="#081d54" stroke="#081d54"/><path d="M592 175c-27 5-21 48 9 43 28-5 19-48-9-43z" fill="#081d54" stroke="#081d54"/><path d="M311 175c-27 5-20 48 9 43 28-5 19-47-9-43z" fill="#081d54" stroke="#081d54"/><path d="M704 175c-28 5-18 47 9 43s20-48-9-43z" fill="#081d54" stroke="#081d54"/><path d="M479 175c-26 6-19 49 11 42 27-5 16-47-11-42z" fill="#081d54" stroke="#081d54"/></g></svg>
CSS background-image
.dotted-square {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ARqjV_KJc_gv/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.dotted-square {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ARqjV_KJc_gv/amnt.svg") center / contain no-repeat;
}
React
import DottedSquareSvg from "./dotted-square.jsx"; // from the React tab above

<DottedSquareSvg width={48} height={48} />

Tags

dotted squaredotssquareoutlineelementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Dotted Square: Equal-length sides of spaced dots forming a centred square. A flat element. as part of the pack Dots and grids, flat · Set 2. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings