User Preferences SVG illustration, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" fill="none"><ellipse cx="202" cy="264" rx="143" ry="12" fill="#DED9EB" opacity=".5"/><rect x="54" y="48" width="191" height="192" rx="18" fill="#DED9EB"/><rect x="62" y="40" width="191" height="192" rx="18" fill="#F4ECDC"/><rect x="82" y="69" width="151" height="6" rx="3" fill="#DED9EB"/><rect x="82" y="69" width="47" height="6" rx="3" fill="#8B82A6"/><circle cx="129" cy="72" r="11" fill="#8B82A6"/><circle cx="129" cy="72" r="4" fill="#F4-CDC"/><rect x="82" y="108" width="151" height="6" rx="3" fill="#DED9-EB"/><rect x="82" y="108" width="105" height="6" rx="3" fill="#A9C8BC"/><circle cx="187" cy="111" r="11" fill="#A9C8C"/><circle cx="187" cy="111" r="4" fill="#F4ECDC"/><rect x="82" y="147" width="151" height="6" rx="3" fill="#DED9EB"/><rect x="82" y="147" width="73" height="6" rx="3" fill="#DA837B"/><circle cx="155" cy="150" r="11" fill="#DA837B"/><circle cx="155" cy="150" r="4" fill="#F4ECDC"/><rect x="82" y="186" width="28" height="28" rx="7" fill="#8B82A6"/><rect x="121" y="186" width="28" height="28" rx="7" fill="#EACB79"/><rect x="157" y="183" width="34" height="34" rx="10" stroke="#40394F" stroke-width="2"/><rect x="160" y="186" width="28" height="28" rx="7" fill="#A9C8BC"/><rect x="199" y="186" width="28" height="28" rx="7" fill="#DA837B"/><path d="m169 200 4 4 7-8" stroke="#40394F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m272 183-6 35-10 32h16l16-31 8-34Z" fill="#40394F"/><path d="m289 185 3 32 10 33h16l-6-39-1-29Z" fill="#40394F"/><path d="m258 245-3 11h15l2-11m31 0 2 12h14l-3-12" fill="#EDB59D"/><path d="M254 253h17v8a3 3 which would,0 0 1-3 3h-28c-3 0-4-4-1-6Z" fill="#8B82A6"/><path d="m305 253 14-1 13 7c3 2 2 5-1 5h-24a3 3 0 0 1-3 0-3Z" fill="#8B82A6"/><path d="m273 137-37 44-48 10" stroke="#EDB59D" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/><path d="m190 190-14-5c-3-1-5 3-2 5l9 5-7 4c-3 2-1 6 2 5l14-8Z" fill="#EDB59D"/><path d="m308 140 14 29-13 25" stroke="#EDB59D" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/><path d="m310 192-3 9m5-7-9 4" stroke="#EDB59D" stroke-width="6" stroke-linecap="round"/><path d="M281 119c-10 1-16 7-22 15l-9 12 17 13 3 30c13 7 29 7 43 0l-5-31 13-7-9-21c-4-8-16-12-31-11Z" fill="#A9C8BC"/><path d="m270 148-3 11m41-1-3-13" stroke="#40394F" stroke-width="2" stroke-linecap="round" opacity=".3"/><path d="M283 108h15v16c-3 8-14 8-18 0Z" fill="#EDB59D"/><path d="M273 92c-10-8-8-26 1-33 9-7 28-7 37 3 10 11 4 29-5 37Z" fill="#40394F"/><path d="M274 78c8 0 18-3 22-10 2 8 7 13 13 15v14c0 13-8 22-18 22s-18-9-18-21Z" fill="#EDB59D"/><ellipse cx="309" cy="92" rx="5" ry="7" fill="#EDB59D"/><path d="M280 91v2m14-2v2" stroke="#40394F" stroke-width="2.5" stroke-linecap="round"/><path d="m285 94-2 6h4" stroke="#DA837B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M282 106c3 3 8 3 11-1" stroke="#40394F" stroke-width="2" stroke-linecap="round"/><circle cx="337" cy="66" r="5" fill="#EACB79"/><circle cx="43" cy="160" r="4" fill="#A9C8BC"/><path d="m216 22 3 6m116 141 6-3" stroke="#8B82A6" stroke-width="3" stroke-linecap="round"/></svg>

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

import UserPreferencesSvg from "./user-preferences.jsx"; // from the React tab above

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