diff --git a/docs/componenti/alert.md b/docs/componenti/alert.md
index ceceb18d01..fa9ed40917 100755
--- a/docs/componenti/alert.md
+++ b/docs/componenti/alert.md
@@ -12,7 +12,7 @@ Gli avvisi sono disponibili in quattro tipologie diverse e sono adatti a qualsia
 
 {% comment %}Example name: Varianti per tipologia{% endcomment %}
 {% capture example %}
-{% assign colors = "info,success,warning,danger" | split: ','%}
+{% assign colors = "primary,info,success,warning,danger" | split: ','%}
 {% for color in colors %}
 
 <div class="alert alert-{{color}}" role="alert">
diff --git a/src/scss/custom/_alert.scss b/src/scss/custom/_alert.scss
index f8fa113fad..026a983bdb 100644
--- a/src/scss/custom/_alert.scss
+++ b/src/scss/custom/_alert.scss
@@ -46,7 +46,7 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $color, $value in $theme-colors {
-  @if ($color == 'danger' or $color == 'warning' or $color == 'success' or $color == 'info') {
+  @if ($color == 'danger' or $color == 'warning' or $color == 'success' or $color == 'info' or $color == 'primary') {
     .alert-#{$color} {
       background-position: 20px 16px;
       background-repeat: no-repeat;
@@ -68,3 +68,6 @@
 .alert-info {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($info)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z'%3E%3C/path%3E%3C/svg%3E");
 }
+.alert-primary {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($primary)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z'%3E%3C/path%3E%3C/svg%3E");
+}