Adjust spacing between cart and quantity in header

Site URL: https://www.ariellazoelle.com/store

I'm getting ready to launch my store and I'm having some trouble with my quantity sizing and the position of my custom icon for the cart. If someone adds 20 or more items to the cart, the number touches the cart. I'd like to introduce a little spacing between them to make it easier to read and so I can make the quantity number a bit bigger as well since that's really tiny. 

This is the code I'm currently using on the website:

// Custom Cart Icon //

.header .header-actions-action--cart .icon {
  background: url(https://static1.squarespace.com/static/5e8fc901cd14a73a8f1347b3/t/62d97302475e0e3628b75aad/1658417923056/Cart+Thicker.jpg) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
}

// Text Under Cart Icon //

.header .header-actions-action--cart .icon:after {
  content: "CART";
  color: #FF61D7;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 0px;
  width: 100% !important;
  display: inline-block;
}

// Cart Item Number //

.icon-cart-quantity {
  font-size: 1em !important;
  font-weight: 900;
  text-align: right;
}
.sqs-cart-quantity {
  color: #FF61D7;
}

Any advice on how to fix the cart quantity spacing with the icon would be very much appreciated! Thank you!

Thank you, that worked perfectly! I appreciate you always helping me out!