When you use the shorthand property background, you are replacing all the background-* properties that are set by Bootstrap 4. If you only want to change the background-color property, here is a solution for you:
Custom solution using Bootstrap 4 (alpha) - original answer:
.custom-checkbox .custom-control-indicator {
background-color: #fff;
border: 1px solid #2c2b2c;
border-radius: 50%;
height: 25px;
width: 25px;
}
.custom-control-description {
color: #2c2b2c;
font-size: 12px;
line-height: 2.7;
text-transform: uppercase;
}
/* When I remove the background, the icon reverts to its default size */
.custom-control-input:checked ~ .custom-control-indicator {
background-color: red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description ml-4">Checkbox</span>
</label>
</div>
Custom solution using Bootstrap 4 (stable - not alpha or beta):
.form-check .custom-control-label {
color: #2c2b2c;
font-size: 12px;
line-height: 2.7;
padding-left:15px;
text-transform: uppercase;
}
.form-check .custom-control-label::after,
.form-check .custom-control-label::before {
height: 25px;
width: 25px;
}
.form-check .custom-control-label::before {
background-color: #fff;
border: 1px solid #2c2b2c;
border-radius: 50%;
}
/* When I remove the background, the icon goes back to its default size */
.custom-control-input:checked ~ .custom-control-label::before {
background-color: red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customControlID">
<label class="custom-control-label" for="customControlID">Checkbox</label>
</div>
</div>
Explanation of the background shorthand property:
When you use the background property on its own, you are essentially overriding the following CSS rules:
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;