diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index af8c95c624b4dd66b4699ec56af71c2beb37437d..d6c7eda014f047f862d242a68cd0c03d9dad9ed8 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -225,16 +225,16 @@
   .carousel-control {
     .icon-prev,
     .icon-next {
-      width: 30px;
-      height: 30px;
-      margin-top: -15px;
-      font-size: 30px;
+      width: $carousel-control-sm-up-size;
+      height: $carousel-control-sm-up-size;
+      margin-top: -($carousel-control-sm-up-size / 2);
+      font-size: $carousel-control-sm-up-size;
     }
     .icon-prev {
-      margin-left: -15px;
+      margin-left: -($carousel-control-sm-up-size / 2);
     }
     .icon-next {
-      margin-right: -15px;
+      margin-right: -($carousel-control-sm-up-size / 2);
     }
   }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2c48a70594a8260dadb04b9363d216775fa2e365..6352b602bc626092d3b51b9d9d035df7e1920ec7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -760,6 +760,7 @@ $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
 
 $carousel-control-color:                      #fff !default;
 $carousel-control-width:                      15% !default;
+$carousel-control-sm-up-size:                 30px !default;
 $carousel-control-opacity:                    .5 !default;
 $carousel-control-font-size:                  20px !default;