Add icons to this collection by clicking the heart icon.
Surprise icon - also known as box, surprise, childhood, toy, joke, gaming, miscellaneous, hobbies and free time, birthday and party, kid and baby, and jack in the box. Created in a clean lineal color style with a silver, gray, black, teal, orange, and pink finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="682.667"
height="682.667"
viewBox="0 0 682.667 682.667"
>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
</defs>
<g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)">
<path
d="M0 0v52c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15V0c0-8.284-6.715-15-15-15C6.716-15 0-8.284 0 0"
transform="translate(241.188 437.5)"
fill="#f48fb1"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0 20.054 47.978c3.195 7.643 11.981 11.25 19.625 8.054 7.643-3.194 11.249-11.98 8.054-19.624L27.679-11.569c-3.195-7.644-11.981-11.25-19.624-8.055C.411-16.429-3.195-7.643 0 0"
transform="translate(262.09 442.89)"
fill="#ffc328"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0 34.362 39.028c5.475 6.218 14.953 6.821 21.171 1.346s6.821-14.952 1.346-21.17L22.517-19.825c-5.475-6.218-14.954-6.821-21.17-1.346h-.001C-4.871-15.696-5.475-6.218 0 0"
transform="translate(280.978 429.959)"
fill="#f48fb1"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0 49.452 16.078c7.879 2.562 16.342-1.749 18.903-9.627V6.45c2.562-7.878-1.749-16.341-9.626-18.902L9.276-28.53c-7.879-2.561-16.341 1.749-18.903 9.628C-12.188-11.024-7.878-2.562 0 0"
transform="translate(288.343 419.36)"
fill="#ffc328"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-20.055 47.978c-3.195 7.643-11.981 11.25-19.624 8.054-7.643-3.194-11.25-11.98-8.055-19.624l20.055-47.977c3.195-7.644 11.981-11.25 19.624-8.055C-.412-16.429 3.195-7.643 0 0"
transform="translate(249.91 442.89)"
fill="#ffc328"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-34.363 39.028c-5.474 6.218-14.952 6.821-21.17 1.346-6.218-5.475-6.821-14.952-1.346-21.17l34.362-39.029c5.475-6.218 14.953-6.821 21.171-1.346S5.474-6.218 0 0"
transform="translate(231.022 429.959)"
fill="#f48fb1"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0-49.452 16.078c-7.879 2.562-16.341-1.749-18.903-9.627V6.45c-2.562-7.878 1.749-16.341 9.627-18.902L-9.275-28.53c7.878-2.561 16.341 1.749 18.902 9.628C12.188-11.024 7.878-2.562 0 0"
transform="translate(223.657 419.36)"
fill="#ffc328"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M389 7.5H123v162.455h266z"
fill="#80deea"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M359 7.5h30v162.455h-30z"
fill="#4dd0e1"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M123 122.541h266v-60H123Z"
fill="#f78e36"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M359 62.541h30v60h-30z"
fill="#f86f1b"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0-39.646-32.139-71.784-71.784-71.784S-143.568-39.646-143.568 0c0 39.646 32.139 71.784 71.784 71.784S0 39.646 0 0"
transform="translate(327.784 387.654)"
fill="#ffc6a1"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0a72.036 72.036 0 0 1-15-1.581C17.442-8.48 41.784-37.284 41.784-71.784c0-34.499-24.342-63.304-56.784-70.202a71.969 71.969 0 0 1 15-1.582c39.646 0 71.784 32.139 71.784 71.784S39.646 0 0 0"
transform="translate(256 459.438)"
fill="#fdaa8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0-12.203-9.892-22.095-22.095-22.095-12.202 0-22.095 9.892-22.095 22.095s9.893 22.095 22.095 22.095C-9.892 22.095 0 12.203 0 0"
transform="translate(278.095 373.744)"
fill="#f75632"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0"
transform="translate(282 169.955)"
fill="#43809f"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15H0c8.284 0 15 6.716 15 15C15-6.716 8.284 0 0 0M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0"
transform="translate(282 199.955)"
fill="#3b7191"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-30c8.284 0 15-6.715 15-15 0-8.284-6.716-15-15-15H0c8.284 0 15 6.716 15 15C15-6.715 8.284 0 0 0"
transform="translate(282 229.955)"
fill="#2b6182"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0"
transform="translate(282 229.955)"
fill="#43809f"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-30c8.284 0 15-6.715 15-15 0-8.284-6.716-15-15-15H0c8.284 0 15 6.716 15 15C15-6.715 8.284 0 0 0M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0"
transform="translate(282 259.955)"
fill="#3b7191"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-30c8.284 0 15-6.715 15-15 0-8.284-6.716-15-15-15H0c8.284 0 15 6.716 15 15C15-6.715 8.284 0 0 0"
transform="translate(282 289.955)"
fill="#2b6182"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0"
transform="translate(282 289.955)"
fill="#43809f"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-30c8.284 0 15-6.715 15-15 0-8.284-6.716-15-15-15H0c8.284 0 15 6.716 15 15C15-6.715 8.284 0 0 0"
transform="translate(282 319.955)"
fill="#3b7191"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v24.481c0 8.285 6.716 15 15 15 8.285 0 15-6.715 15-15V-.36"
transform="translate(241.188 465.019)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0 13.138 31.43c3.195 7.643 11.981 11.25 19.625 8.054 7.643-3.194 11.249-11.98 8.054-19.624L28.316-10.047"
transform="translate(269.006 459.438)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0 17.587 19.976c5.475 6.217 14.953 6.82 21.171 1.345 6.218-5.474 6.82-14.952 1.346-21.17L19.953-22.735"
transform="translate(297.754 449.012)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0 20.915 6.801c7.879 2.561 16.342-1.749 18.903-9.627v-.001c2.562-7.878-1.749-16.341-9.627-18.902l-20.393-6.63"
transform="translate(316.88 428.637)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0-12.84 30.717c-3.195 7.643-11.981 11.25-19.624 8.054v0c-7.643-3.194-11.25-11.98-8.055-19.624l12.501-29.907"
transform="translate(242.696 460.151)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0-17.587 19.976c-5.475 6.217-14.953 6.82-21.171 1.345-6.218-5.474-6.82-14.952-1.346-21.17l18.878-21.441"
transform="translate(214.246 449.012)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0-20.788 6.759C-28.667 9.32-37.129 5.01-39.691-2.868v-.001c-2.561-7.878 1.749-16.341 9.628-18.902l19.875-6.462"
transform="translate(194.993 428.679)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-36.867v162.455h196.588"
transform="translate(159.867 7.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h36.761v-162.455h-197.319"
transform="translate(352.24 169.955)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M123 122.541h266v-60H123Z"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0a71.849 71.849 0 0 1 28.68-18.868"
transform="translate(203.38 338.828)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c27.88 9.86 47.84 36.45 47.84 67.69 0 39.65-32.13 71.79-71.78 71.79s-71.78-32.14-71.78-71.79a71.747 71.747 0 0 1 3.22-21.321"
transform="translate(279.94 319.96)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0c0-12.203-9.892-22.095-22.095-22.095-12.202 0-22.095 9.892-22.095 22.095s9.893 22.095 22.095 22.095C-9.892 22.095 0 12.203 0 0Z"
transform="translate(278.095 373.744)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0Z"
transform="translate(282 169.955)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0Z"
transform="translate(282 199.955)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0Z"
transform="translate(282 229.955)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0Z"
transform="translate(282 259.955)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-52c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15H0c8.284 0 15-6.716 15-15C15 6.716 8.284 0 0 0Z"
transform="translate(282 289.955)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
</svg>
More icons in the same style and category