Colours and style

Every picture in the library follows these, and so does every download.

Colour of single-colour icons
Palette for colourful pictures
As drawn
100%
Add Button SVG element, flat

Add Button SVG element, flat

A large plus sign sits at the centre of this wide rounded button. It suits task lists and inventory management screens.

Similar SVGs

More from Website Buttons, Flat · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/vsgtQB6kvs25/amnt.svg" alt="Add Button" 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="blue" data-name="Blue"><path d="M237 308c-197 15-254 279-79 372 18 10 38 17 58 20 33 5 66 2 100 2 47 0 94 1 142 1 106-1 214-1 321-1 197 0 266-270 92-368-19-11-40-19-62-23-30-5-62-3-93-3-50 0-100 0-149 0-74 0-147 0-220 0-37 0-74-2-110 0zM542 477c21 0 81-4 97 2 12 3 19 16 19 28 0 35-39 30-63 30-18 0-35 0-53 0 0 17 0 33 0 50 0 23 4 62-30 62s-30-39-30-62c0-17 0-34 0-50-22 0-81 4-98-3-11-4-18-15-18-27s7-25 20-29c17-5 75-1 96-1 0-23-4-74 3-94 3-11 15-18 27-18 34 0 30 38 30 62 0 16 0 33 0 50z" fill="#0179fb" stroke="#0179fb"/></g><g id="grape" data-name="Grape"><path d="M388 287c-31 0-61 1-91 1-22 0-44-1-65 0-49 3-99 27-133 61-69 68-87 173-41 259 31 60 92 104 160 113 25 3 50 2 76 2 116 0 233 0 350 0 105 0 205 16 286-65 67-68 81-177 33-260-34-58-93-100-161-109-25-3-52-1-77-1-112 0-225-1-337-1zM237 308c36-2 73 0 110 0 73 0 146 0 220 0 49 0 99 0 149 0 31 0 63-2 93 3 22 4 43 12 62 23 174 98 105 368-92 368-107 0-215 0-321 1-48 0-95-1-142-1-34 0-67 3-100-2-20-3-40-10-58-20-175-93-118-357 79-372z" fill="#011d62" stroke="#011d62"/></g><g id="white" data-name="White"><path d="M542 477c0-17 0-34 0-50 0-24 4-62-30-62-12 0-24 7-27 18-7 20-3 71-3 94-21 0-79-4-96 1-13 4-20 17-20 29s7 23 18 27c17 7 76 3 98 3 0 16 0 33 0 50 0 23-4 62 30 62s30-39 30-62c0-17 0-33 0-50 18 0 35 0 53 0 24 0 63 5 63-30 0-12-7-25-19-28-16-6-76-2-97-2z" fill="#fcfcfc" stroke="#fcfcfc"/></g></svg>
CSS background-image
.add-button {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/vsgtQB6kvs25/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.add-button {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/vsgtQB6kvs25/amnt.svg") center / contain no-repeat;
}
React
import AddButtonSvg from "./add-button.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Add Button: Wide rounded button with a large centred plus sign. A flat element. as part of the pack Website Buttons, 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