static/intro-icons.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="crab" viewBox="0 0 72 72">
  <g id="color">
    <path fill="#D22F27" d="M35.9919,24.238c0,0,5.2486-1.1983,9.4474,4.7934C47.2209,31.5738,48.1919,31.1574,49,32 c0.223,0.2326,1.6588,2.2978,1.8232,2.4454c1.2302,1.1039,1.0661,2.6158,1.1659,4.2657C52.0375,39.5101,51.8589,41.5825,51,42 c-1.5418,0.7495-1.9421,2.569-5.5607,3.8083c0,0-6.2983,1.1983-9.4474-2.3967c0,0-3.1491,4.7934-11.5468,1.1983 c0,0-2.7901-0.9101-3.9493-3.291C19.7738,39.8361,19,38,20,36c0,0,0.3355-1.2415,1-2c1.387-1.5834,4.4982-4.4271,5-5 C28.0994,26.6033,31.7931,23.0397,35.9919,24.238z" stroke="none"/>
    <path fill="#EA5A47" d="M21,36c0,0-5-4-8,3s1,7,1,7s4,0,4-2s-1.6667-5,2.6667-6.5L21,36z" stroke="none"/>
    <path fill="#EA5A47" d="M13,47c0,0-4,11,10,13c0,0,5,0,6-3c0,0-7,0-8-3s0-7-3-8C18,46,15,46,13,47z" stroke="none"/>
    <path fill="#EA5A47" d="M50.8843,36c0,0,5-4,8,3s-1,7-1,7s-4,0-4-2s1.6667-5-2.6667-6.5L50.8843,36z" stroke="none"/>
    <path fill="#EA5A47" d="M58.8843,47c0,0,4,11-10,13c0,0-5,0-6-3c0,0,7,0,8-3s0-7,3-8C53.8843,46,56.8843,46,58.8843,47z" stroke="none"/>
  </g>
  <g id="line">
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M50.8135,41.1966C50.112,42.5751,48.4473,43.9658,45,45c0,0-6,1-9-2c0,0-3,4-11,1c0,0-2.658-0.7594-3.7623-2.7463"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M23.0833,32.9167C24.4047,31.5953,26.5219,29.4781,27,29c2-2,5-5,9-4c0,0,5-1,9,4c1.6973,2.1216,2.8544,3.3429,3.6242,4.0461"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M25,44c0,0-2,1-2,3"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M29.0833,45.0833C29.0833,45.0833,28,46,28,48"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M44,45.0833c0,0,1.0833,0.9167,1.0833,2.9167"/>
    <ellipse cx="32" cy="20.5" rx="1" ry="2.5" fill="#000000" stroke="none"/>
    <ellipse cx="40" cy="20.5" rx="1" ry="2.5" fill="#000000" stroke="none"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M48.3353,43.7517c0,0,1.7184,1.2213,1.3293,2.4966"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M21,36c0,0-5-4-8,3s1,7,1,7s4,0,4-2s-1.6667-5,2.6667-6.5L21,36z"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M13,47c0,0-4,11,10,13c0,0,5,0,6-3c0,0-7,0-8-3s0-7-3-8C18,46,15,46,13,47z"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M50.8843,36c0,0,5-4,8,3s-1,7-1,7s-4,0-4-2s1.6667-5-2.6667-6.5L50.8843,36z"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M58.8843,47c0,0,4,11-10,13c0,0-5,0-6-3c0,0,7,0,8-3s0-7,3-8C53.8843,46,56.8843,46,58.8843,47z"/>
  </g>
</symbol>

<symbol id="heart" viewBox="0 0 72 72">
  <g id="color">
    <path fill="#E67A94" d="M24.7156,17c-6.5266,0-11.8365,5.3099-11.8365,11.8365c0,2.1744,0.5933,4.2991,1.717,6.1444l0.6782,1.0002 l21.0201,26.9447l21.1434-27.1108c1.4812-2.0189,2.2737-4.44,2.2737-6.9785C59.7114,22.3099,54.4005,17,47.8728,17 c-4.5739,0-8.6563,2.5697-10.6537,6.7057c-0.1714,0.3547-0.5307,0.5804-0.9248,0.5804c-0.3943,0-0.7539-0.2257-0.9249-0.5804 C33.3719,19.5697,29.2895,17,24.7156,17z" stroke="none"/>
    <path fill="#fcea2b" d="M26.676,43.3048c0.1049,0.5815,0.6677,1.0558,1.421,1.1981l8.5987,1.6246 c0.4027,0.0761,0.4073,0.5078,0.0046,0.5839c-2.282,0.4312-6.5127,1.2304-8.6081,1.6263c-0.7533,0.1423-1.3112,0.616-1.4161,1.1974 l-2.2795,12.6334c-0.0627,0.3475-0.7275,0.3475-0.7902,0l-2.2795-12.6332c-0.1049-0.5815-0.6629-1.0552-1.4163-1.1975 c-2.0955-0.3957-6.3263-1.195-8.6084-1.6262c-0.4027-0.0761-0.4027-0.5069,0-0.583c2.2823-0.4312,6.5133-1.2306,8.6086-1.6267 c0.7532-0.1423,0.8465-0.8247,0.9514-1.4061l1.7931-10.1776c0.0627-0.3475,1.6784-2.5957,1.741-2.2481 C25.1058,34.6022,26.5356,42.5265,26.676,43.3048z" stroke="none"/>
    <path fill="#f1b31c" d="M23.8372,62.1686l1.7746-11.1247c-1.9242-3.3355-3.3469-6.7963-4.2428-9.2606l-0.2443,1.5312 c-0.0927,0.5811-0.5856,1.0544-1.2512,1.1968c-1.8515,0.3958-5.5901,1.1948-7.6067,1.6259c-0.3558,0.076-0.3558,0.5066,0,0.5827 c2.0165,0.431,5.7549,1.2298,7.6064,1.6253c0.6657,0.1423,1.1588,0.6157,1.2515,1.1969l2.0142,12.6267 C23.1944,62.516,23.7819,62.516,23.8372,62.1686z" stroke="none"/>
    <path fill="#fcea2b" d="M52.8824,24.9358c0.0862,0.4637,0.5487,0.8419,1.1677,0.9554l7.0663,1.2955 c0.3309,0.0607,0.3347,0.4049,0.0038,0.4656c-1.8753,0.3438-5.352,0.9812-7.074,1.2969c-0.619,0.1135-1.0775,0.4912-1.1637,0.9548 l-1.8733,10.0742c-0.0515,0.2771-0.5978,0.2771-0.6494,0l-1.8733-10.074c-0.0862-0.4637-0.5448-0.8414-1.1639-0.9549 c-1.722-0.3156-5.1988-0.9529-7.0743-1.2967c-0.3309-0.0607-0.3309-0.4042,0-0.4649c1.8755-0.3438,5.3525-0.9813,7.0745-1.2972 c0.619-0.1135,0.6956-0.6577,0.7818-1.1213l1.4736-8.1159c0.0515-0.2771,1.3793-2.0699,1.4308-1.7927 C51.592,17.9961,52.767,24.3151,52.8824,24.9358z" stroke="none"/>
    <path fill="#f1b31c" d="M51.0748,39.9782l1.2105-8.8711c-1.3126-2.6598-2.2831-5.4195-2.8942-7.3846l-0.1666,1.221 c-0.0633,0.4634-0.3994,0.8408-0.8535,0.9543c-1.263,0.3156-3.8133,0.9528-5.1889,1.2965c-0.2427,0.0606-0.2427,0.404,0,0.4647 c1.3756,0.3437,3.9257,0.9807,5.1887,1.2961c0.4541,0.1134,0.7904,0.491,0.8537,0.9544l1.374,10.0688 C50.6363,40.2552,51.037,40.2552,51.0748,39.9782z" stroke="none"/>
  </g>
  <g id="line">
    <path fill="none" stroke="#000000" stroke-width="0.1841" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M23.0568,35.6316"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M22.5556,37.4499l1.5469-8.0604l0.5052,3.0162c0.081,0.4824,1.6827,10.0429,1.6827,10.0429 c0.1889,1.1269,1.1869,2.0334,2.5426,2.3092L37,46.4198l-8.1728,1.663c-1.3523,0.2752-2.3482,1.1812-2.5369,2.3084l-2.1876,13.0587 l-2.1876-13.0582c-0.1889-1.1272-1.1848-2.0333-2.5372-2.3085l-8.173-1.6629l8.1735-1.6634 c1.352-0.2753,2.2663-1.8467,2.455-2.9736"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M49.8482,20.267l1.2335-6.4275l0.4029,2.4052c0.0646,0.3847,1.3418,8.0084,1.3418,8.0084 c0.1506,0.8986,0.9465,1.6215,2.0275,1.8414l6.5126,1.3253l-6.5171,1.3261c-1.0783,0.2194-1.8725,0.9419-2.023,1.8408L51.0819,41 l-1.7445-10.4129c-0.1506-0.8988-0.9448-1.6214-2.0232-1.8409l-6.5174-1.326l6.5177-1.3264 c1.0781-0.2195,1.8072-1.4726,1.9577-2.3712"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M46.3203,17.6751c-3.9386,0.4194-7.3646,2.8152-9.1257,6.4619c-0.1669,0.3453-0.5166,0.565-0.9003,0.565 c-0.3838,0-0.7339-0.2197-0.9004-0.565c-1.9444-4.0263-5.9185-6.5278-10.3711-6.5278c-6.3535,0-11.5225,5.169-11.5225,11.5225 c0,2.1167,0.5776,4.185,1.6714,5.9814l0.6602,0.9737l1.6832,2.1576 M29.517,53.6291l6.7773,8.6876l20.5825-26.3916 c0.8796-1.1989,1.5097-2.5434,1.8674-3.9708 M29.2582,53.2974l0.2588,0.3317 M29.2582,53.2974 M21.7132,43.6258 M17.5151,38.2444 l0.6467,0.829"/>
  </g>
</symbol>

<symbol id="joystick" viewBox="0 0 72 72">
  <g id="color">
    <polyline fill="#EA5A47" points="17,55 17,52 24,52 24,55" stroke="none"/>
    <circle fill="#EA5A47" cx="36" cy="17" r="10" stroke="none"/>
    <path fill="#3F3F3F" d="M27,55c0-3.866,4.0294-7,9-7s9,3.134,9,7" stroke="none"/>
    <rect x="33" y="27" fill="#9B9B9A" stroke="#9B9B9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="21"/>
    <rect x="14" y="55" fill="#9B9B9A" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="44" height="10"/>
    <polygon fill="#D22F27" points="41,8 34,27 40,26 45,21 46,15" stroke="none"/>
  </g>
  <g id="line">
    <rect x="14" y="55" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="44" height="10"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M27,55c0-3.866,4.0294-7,9-7s9,3.134,9,7"/>
    <polyline fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="17,55 17,52 24,52 24,55"/>
    <polyline fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="39,44.703 39,44 39,27 33,27 33,44.7053"/>
    <circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="36" cy="17" r="10"/>
  </g>
</symbol>

<symbol id="incoming-envelope" viewBox="0 0 72 72">
  <g id="color">
    <rect x="27.5987" y="23.8185" rx="1.5627" width="37.5107" height="23.4538" fill="var(--icon-fill-color)"/>
    <path fill="var(--icon-fill-color)" d="M65.1522,24.5967V44.5922a4.1748,4.1748,0,0,1-.3759,1.729L56.282,38.5034l-.7517.0751-3.082-2.8565Z"/>
  </g>
  <g id="line">
    <line x1="5.7967" x2="22.1067" y1="41.904" y2="41.904" fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
    <line x1="9.2917" x2="22.1067" y1="34.914" y2="34.914" fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
    <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M36.512,38.5785l-8.4192,7.7427a3.9028,3.9028,0,0,1-.451-1.729v-19.92"/>
    <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M57.5383,39.399,64.83,46.11a3.5861,3.5861,0,0,0,.3226-1.4841V24.5967"/>
    <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M55.4551,37.7517l9.2461,8.4943a1.6075,1.6075,0,0,1-1.3531.9772H29.3707a1.78,1.78,0,0,1-1.3531-.902l9.0957-8.344"/>
    <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M65.1522,24.5967l-12.0274,11.05-3.3827,3.1572c-.15.15-.3759.3006-.5262.451a4.6338,4.6338,0,0,1-5.7882,0c-.15-.15-.3758-.3007-.5262-.451L39.5188,35.722l-11.877-11.05c0-.0752.0751-.0752.0751-.15A1.5333,1.5333,0,0,1,28.92,23.77H63.8743a1.6558,1.6558,0,0,1,1.2027.6766C65.077,24.5215,65.1522,24.5215,65.1522,24.5967Z"/>
  </g>
</symbol>

</svg>