Error SVG icon, line

Error SVG icon, line

A centered X inside a circle signals an error. Place it beside an invalid form field or in a failed upload notification.

Similar SVGs

More from Interface icons, line · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/upU6XYJRXrio/amnt.svg" alt="Error" 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="red" data-name="Red"><path d="M315 235c-17 3-52 37-60 51-17 30 11 53 31 71 38 35 74 73 111 110 33 33 33 24 0 58-19 19-38 36-56 55-20 19-85 78-96 96-4 7-6 16-5 24 2 17 37 51 51 60 30 19 52-10 71-28 37-37 72-76 111-111 7-7 32-36 41-35 6 1 14 13 18 17 18 19 37 37 55 56 20 19 94 102 114 106 7 2 15 2 22-1 11-3 46-37 53-48 5-7 7-17 6-25-2-16-16-27-26-37-37-37-75-73-111-110-7-7-46-41-46-48 0-4 5-7 8-10 18-19 37-36 56-55 17-18 103-97 108-113 3-8 3-18 0-26-3-11-36-44-47-51-8-5-18-7-27-6-16 2-26 14-36 25-37 36-74 73-110 110-8 7-34 37-42 36-5-1-13-13-17-16-18-20-36-38-55-56-17-17-81-86-96-94-8-4-17-6-26-5z" fill="#fc0202" stroke="#fc0202"/><path d="M484 34c-252 13-466 242-446 497 21 260 237 457 501 441 256-15 463-236 446-495-17-261-241-455-501-443zm10 43c235-10 435 176 447 409 12 236-181 433-412 443-235 10-437-174-447-408s180-433 412-444z" fill="#fc0202" stroke="#fc0202"/></g><g id="black" data-name="Black"><path d="M489 19c-264 12-479 242-466 507s244 475 511 461c264-14 481-236 466-505-15-268-243-474-511-463zm-5 15c260-12 484 182 501 443 17 259-190 480-446 495-264 16-480-181-501-441-20-255 194-484 446-497z" fill="#211c1c" stroke="#211c1c"/><path d="M512 387c-37-37-73-75-111-111-30-28-67-80-113-45-8 6-14 14-21 21-8 7-17 15-23 23-32 45 21 82 49 110 37 37 74 73 111 111-40 36-78 77-117 116-28 28-83 64-55 110 6 11 17 19 25 27 64 66 89 20 138-29 38-38 77-77 116-115 39 38 78 77 117 116 28 28 64 81 109 54 11-6 20-18 29-26 65-61 17-91-31-138-39-38-77-78-116-115 37-37 75-74 112-111 27-28 75-61 52-105-6-11-17-19-25-28-9-9-18-20-29-26-45-24-78 22-106 50-37 37-74 74-111 111zM315 235c9-1 18 1 26 5 15 8 79 77 96 94 19 18 37 36 55 56 4 3 12 15 17 16 8 1 34-29 42-36 36-37 73-74 110-110 10-11 20-23 36-25 9-1 19 1 27 6 11 7 44 40 47 51 3 8 3 18 0 26-5 16-91 95-108 113-19 19-38 36-56 55-3 3-8 6-8 10 0 7 39 41 46 48 36 37 74 73 111 110 10 10 24 21 26 37 1 8-1 18-6 25-7 11-42 45-53 48-7 3-15 3-22 1-20-4-94-87-114-106-18-19-37-37-55-56-4-4-12-16-18-17-9-1-34 28-41 35-39 35-74 74-111 111-19 18-41 47-71 28-14-9-49-43-51-60-1-8 1-17 5-24 11-18 76-77 96-96 18-19 37-36 56-55 33-34 33-25 0-58-37-37-73-75-111-110-20-18-48-41-31-71 8-14 43-48 60-51z" fill="#211c1c" stroke="#211c1c"/><path d="M494 77c-232 11-422 210-412 444s212 418 447 408c231-10 424-207 412-443-12-233-212-419-447-409zm-1 15c223-9 424 167 434 393 10 227-172 418-397 429-224 11-424-166-434-392-10-225 173-420 397-430z" fill="#211c1c" stroke="#211c1c"/></g></svg>
CSS background-image
.error {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/upU6XYJRXrio/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.error {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/upU6XYJRXrio/amnt.svg") center / contain no-repeat;
}
React
import ErrorSvg from "./error.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Error: Circle outline containing a centered X. A flat colour icon. as part of the pack Interface icons, line · 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