diff --git a/app/Http/Requests/NavbarElementRequest.php b/app/Http/Requests/NavbarElementRequest.php
index 71e4b761..d4e07546 100644
--- a/app/Http/Requests/NavbarElementRequest.php
+++ b/app/Http/Requests/NavbarElementRequest.php
@@ -47,6 +47,7 @@ public function rules()
     {
         return [
             'name' => ['required', 'string', 'max:100'],
+            'icon' => ['nullable', 'string', 'max:100'],
             'type' => ['string', Rule::in(NavbarElement::types())],
             'link' => ['required_if:type,link', 'nullable', 'string', 'max:150'],
             'plugin' => ['required_if:type,plugin', 'nullable', Rule::in(plugins()->getRouteDescriptions()->keys())],
diff --git a/app/Models/NavbarElement.php b/app/Models/NavbarElement.php
index 52d1f4b6..cde620e0 100644
--- a/app/Models/NavbarElement.php
+++ b/app/Models/NavbarElement.php
@@ -13,6 +13,7 @@
 /**
  * @property int $id
  * @property string $name
+ * @property string|null $icon
  * @property string $value
  * @property int $position
  * @property string $type
@@ -50,7 +51,7 @@ class NavbarElement extends Model
      * @var array
      */
     protected $fillable = [
-        'name', 'value', 'position', 'type', 'parent_id', 'new_tab',
+        'name', 'icon', 'value', 'position', 'type', 'parent_id', 'new_tab',
     ];
 
     /**
@@ -127,7 +128,14 @@ public function isCurrent()
 
     public function getNameAttribute(string $value)
     {
-        return new HtmlString($value);
+        $icon = $this->icon !== null ? '<i class="'.$this->icon.'"></i> ' : '';
+
+        return new HtmlString($icon.e($value));
+    }
+
+    public function rawName()
+    {
+        return $this->getRawOriginal('name');
     }
 
     public function getTypeValue(string $type)
diff --git a/database/migrations/2022_09_02_000000_add_icon_to_navbar_elements_table.php b/database/migrations/2022_09_02_000000_add_icon_to_navbar_elements_table.php
new file mode 100644
index 00000000..bd0a72a2
--- /dev/null
+++ b/database/migrations/2022_09_02_000000_add_icon_to_navbar_elements_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('navbar_elements', function (Blueprint $table) {
+            $table->string('icon')->nullable()->after('name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('navbar_elements', function (Blueprint $table) {
+            $table->dropColumn('icon');
+        });
+    }
+};
diff --git a/database/seeders/NavbarElementSeeder.php b/database/seeders/NavbarElementSeeder.php
index 78a07cd9..2f52135a 100644
--- a/database/seeders/NavbarElementSeeder.php
+++ b/database/seeders/NavbarElementSeeder.php
@@ -16,6 +16,7 @@ public function run()
     {
         NavbarElement::firstOrCreate(['type' => 'home'], [
             'name' => trans('seed.navbar.home'),
+            'icon' => 'bi bi-house',
             'value' => '#',
         ]);
     }
diff --git a/resources/views/admin/navbar-elements/_form.blade.php b/resources/views/admin/navbar-elements/_form.blade.php
index c00eef35..d4aea2ac 100644
--- a/resources/views/admin/navbar-elements/_form.blade.php
+++ b/resources/views/admin/navbar-elements/_form.blade.php
@@ -1,16 +1,32 @@
 @csrf
 
 <div class="row g-3">
-    <div class="mb-3 col-md-6">
+    <div class="mb-3 col-md-4">
         <label class="form-label" for="nameInput">{{ trans('messages.fields.name') }}</label>
-        <input type="text" class="form-control @error('name') is-invalid @enderror" id="nameInput" name="name" value="{{ (string) old('name', $navbarElement->name ?? '') }}" required>
+        <input type="text" class="form-control @error('name') is-invalid @enderror" id="nameInput" name="name" value="{{ old('name', $navbarElement->rawName() ?? '') }}" required>
 
         @error('name')
         <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
         @enderror
     </div>
 
-    <div class="mb-3 col-md-6">
+    <div class="mb-3 col-md-4">
+        <label class="form-label" for="iconInput">{{ trans('messages.fields.icon') }}</label>
+
+        <div class="input-group @error('icon') has-validation @enderror">
+            <span class="input-group-text"><i class="{{ $navbarElement->icon ?? 'bi bi-house' }}"></i></span>
+
+            <input type="text" class="form-control @error('icon') is-invalid @enderror" id="iconInput" name="icon" value="{{ old('icon', $navbarElement->icon ?? '') }}" placeholder="bi bi-house" aria-labelledby="iconLabel">
+
+            @error('icon')
+            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
+            @enderror
+        </div>
+
+        <small id="iconLabel" class="form-text">@lang('messages.icons')</small>
+    </div>
+
+    <div class="mb-3 col-md-4">
         <label class="form-label" for="typeSelect">{{ trans('messages.fields.type') }}</label>
         <select class="form-select @error('type') is-invalid @enderror" id="typeSelect" name="type" required v-model="type">
             @foreach($types as $type)