Cloud SVG icon, line

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HUavgjI1JKHD/amnt.svg" alt="Cloud" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="sky" data-name="Sky"><path d="M509 228c-93 2-177 65-204 153-3 10-4 25-10 33-2 3-6 6-10 6-5 1-12-3-18-3-27-2-54 6-77 23-17 13-30 31-37 51-3 8-3 18-7 25s-30 13-39 19c-92 58-51 196 57 198 118 3 238 0 357 0 79 0 159 0 239 0 38 0 79 4 117-1 106-12 126-153 22-196-3-2-7-2-9-5-3-4-4-15-5-20-10-33-36-61-68-73-26-9-50-7-76-1-3 0-7 3-9 1-2-1-12-54-14-62-30-88-116-149-209-148z" fill="#9ed8fb" stroke="#9ed8fb"/></g><g id="navy" data-name="Navy"><path d="M753 407c-8-37-19-72-42-102-97-133-296-138-395-4-19 26-36 57-41 90-11 0-22-1-33 0-42 4-82 31-103 67-7 13-11 27-16 41-140 44-115 256 34 260 52 1 105 0 158 0 106 0 212 0 319 0 48 0 97 0 146 0 32 0 66 3 98 0 60-6 112-58 116-118 2-29-5-59-22-83-11-15-25-28-41-37-5-3-15-5-18-9-4-5-5-16-7-22-26-61-90-92-153-83zM509 228c93-1 179 60 209 148 2 8 12 61 14 62 2 2 6-1 9-1 26-6 50-8 76 1 32 12 58 40 68 73 1 5 2 16 5 20 2 3 6 3 9 5 104 43 84 184-22 196-38 5-79 1-117 1-80 0-160 0-239 0-119 0-239 3-357 0-108-2-149-140-57-198 9-6 35-12 39-19s4-17 7-25c7-20 20-38 37-51 23-17 50-25 77-23 6 0 13 4 18 3 4 0 8-3 10-6 6-8 7-23 10-33 27-88 111-151 204-153z" fill="#01245e" stroke="#01245e"/></g></svg>

.cloud {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HUavgjI1JKHD/amnt.svg");
  background-size: contain;
}

.cloud {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HUavgjI1JKHD/amnt.svg") center / contain no-repeat;
}

import CloudSvg from "./cloud.jsx"; // from the React tab above

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