diff --git a/layouts/partials/shortcodes/tab.html b/layouts/partials/shortcodes/tab.html
index a14ce23dd7..20d4b334e9 100644
--- a/layouts/partials/shortcodes/tab.html
+++ b/layouts/partials/shortcodes/tab.html
@@ -1,5 +1,17 @@
+{{- $tabs := (slice | append (dict
+    "color"   .color
+    "content" .content
+    "icon"    .icon
+    "name"    .name
+    "style"   .style
+    "title"   .title
+)) }}
 {{- partial "shortcodes/tabs.html" (dict
     "context" .context
+    "color"   ""
+    "content" $tabs
     "groupid" ""
-    "content" (slice | append (dict "name" (trim .name " ") "content" .content))
+    "icon"    ""
+    "style"   ""
+    "title"   ""
 ) }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 7054fa0759..df0743aa86 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -1,24 +1,74 @@
 {{- $context := .context }}
-{{- $tabs := .content | default slice }}
 {{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }}
+{{- $color := .color }}
+{{- $style := .style }}
+{{- $title := .title }}
+{{- $icon := .icon }}
+{{- $tabs := slice }}
+{{- range $tab := (.content | default slice) }}
+  {{- if and (not $tab.title) $tab.name }}
+    {{- warnf "%s: parameter 'name' is deprecated for shortcode 'tab', use 'title' instead" $context.File.Path }}
+    {{- $tab = merge $tab (dict "title" .name) }}
+  {{- end }}
+  {{- with $tab }}
+    {{- $color := .color | default $color }}
+    {{- $style := .style | default $style | default (cond (ne .color "") "filled" "default") }}
+    {{- $title := .title | default ($style | T) }}
+    {{- $title = trim $title " " }}
+    {{- $icon := .icon | default "" }}
+    {{- if and (not $icon) (eq (len $icon) 0) }}
+      {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
+      {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
+      {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
+      {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+    {{- end }}
+    {{- $icon = trim $icon " " }}
+    {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
+      {{- $icon = printf "fa-fw fas fa-%s" $icon }}
+    {{- end }}
+    {{- $tabs = $tabs | append (dict
+      "color"   $color
+      "content" .content
+      "icon"    $icon
+      "itemid"  (printf "%s%s" ($title | $context.RenderString | plainify) ($icon | plainify))
+      "style"   $style
+      "title"   $title
+    ) }}
+  {{- end }}
+{{- end }}
+{{- $color = .color | default "" }}
+{{- $style = .style | default (cond (ne .color "") "filled" "default") }}
+{{- $title = .title | default ($style | T) }}
+{{- $title = trim $title " " }}
+{{- $icon = .icon | default "" }}
+{{- if and (not $icon) (eq (len $icon) 0) }}
+  {{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
+  {{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
+  {{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
+  {{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
+{{- end }}
+{{- $icon = trim $icon " " }}
+{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
+  {{- $icon = printf "fa-fw fas fa-%s" $icon }}
+{{- end }}
 {{- with $context }}
 <div class="tab-panel" data-tab-group="{{ $groupid }}">
   <div class="tab-nav">
   {{- range $idx, $tab := $tabs }}
     <button
-      data-tab-item="{{ .name | $context.RenderString | plainify }}"
-      class="tab-nav-button tab-panel-style cstyle default{{ cond (eq $idx 0) " active" ""}}"
-      onclick="switchTab('{{ $groupid }}','{{ .name | $context.RenderString | plainify}}')"
+      data-tab-item="{{ .itemid }}"
+      class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}
+      onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
     >
-      <div><div>{{ .name | $context.RenderString }}</div></div>
+      <div><div>{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div></div>
     </button>
   {{- end }}
   </div>
   <div class="tab-content-container">
   {{- range $idx, $tab := $tabs }}
     <div
-      data-tab-item="{{ .name | $context.RenderString | plainify }}"
-      class="tab-content tab-panel-style cstyle default{{ cond (eq $idx 0) " active" ""}}">
+      data-tab-item="{{ .itemid }}"
+      class="tab-content tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}>
       <div class="tab-content-text">
 {{ if ne "<" (substr (strings.TrimLeft " " .content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
 {{ .content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
index 1962807b93..89c3f296e9 100644
--- a/layouts/shortcodes/tab.html
+++ b/layouts/shortcodes/tab.html
@@ -1,18 +1,33 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
+{{- $color   := (.Get "color") }}
 {{- $content := .Inner }}
-{{- $name := (.Get "name") }}
+{{- $icon    := (.Get "icon") }}
+{{- $name    := (.Get "name") }}
+{{- $style   := (.Get "style") }}
+{{- $title   := (.Get "title") }}
 {{- $tabs := slice }}
 {{- if and .Parent (.Parent.Scratch.Get "tabs") }}
     {{- $tabs = .Parent.Scratch.Get "tabs" }}
 {{- end }}
-{{- $tabs = $tabs | append (dict "name" (trim $name " ") "content" $content) }}
+{{- $tabs = $tabs | append (dict
+    "color"   $color
+    "content" $content
+    "icon"    $icon
+    "name"    $name
+    "style"   $style
+    "title"   $title
+) }}
 {{- if .Parent }}
     {{- $.Parent.Scratch.Set "tabs" $tabs }}
 {{- else }}
     {{- $c:=""}}{{/* if no containing tabs shortcode is present, we display this tab as single */}}
     {{- partial "shortcodes/tabs.html" (dict
         "context" .Page
-        "groupid" ""
+        "color"   ""
         "content" $tabs
+        "groupid" ""
+        "icon"    ""
+        "style"   ""
+        "title"   ""
     ) }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index 5b492faab6..49b3fcb428 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -2,12 +2,21 @@
 {{- $version := split hugo.Version "." }}
 {{- $major := int (index $version 0) }}
 {{- $minor := int (index $version 1) }}
-{{- $groupid := ((.Get "groupid") | default ((.Get "groupId") | default "")) }}
+{{- $color   := (.Get "color") }}
+{{- $groupid := (.Get "groupid") }}
 {{- if or (and (eq $major 0) (ge $minor 108)) (gt $major 0) }}
   {{- $groupid = $groupid | default "" }}
 {{- end }}
+{{- $icon    := (.Get "icon") }}
+{{- $style   := (.Get "style") }}
+{{- $title   := (.Get "title") }}
+{{- $tabs    := (.Scratch.Get "tabs") }}
 {{- partial "shortcodes/tabs.html" (dict
   "context" .Page
+  "color"   $color
+  "content" $tabs
   "groupid" $groupid
-  "content" (.Scratch.Get "tabs")
+  "icon"    $icon
+  "style"   $style
+  "title"   $title
 ) }}
\ No newline at end of file