Stepper Completed

src/assets/img/tick-square.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Stepper/index.js

@@ -27,10 +27,16 @@ function Stepper({
            className="w-8 h-8 text-white text-sm rounded-full flex justify-center items-center"
            style={{
              backgroundColor:
-               item.active ? activeColor : deactiveColor,
+               item.active ? activeColor : '#fff',
+               border: item.active ? '' : '1px solid #c8c8c8'
            }}
          >
-           
+           {
+             item.active ? <svg width="37" height="37" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+             </svg>
+  : null             
+           }
          </div>
         <p className={`mr-4 font-bold ${item.active ? 'text-red26' : 'text-gray-400'}`}>{item.title}</p>
          </div>