Use Symfony UX Icons

javiereguiluz · javiereguiluz · commit 986f2394262f · 2024-10-03T15:30:06.000+02:00
diff --git a/assets/app.js b/assets/app.js
@@ -1,8 +1,6 @@
 // start the Stimulus application
 import './bootstrap.js';
 import './styles/app.scss';
-import '@fortawesome/fontawesome-free/css/all.css';
-import '@fortawesome/fontawesome-free/css/v4-shims.css';
 import 'highlight.js/styles/github-dark-dimmed.css';
 import 'lato-font/css/lato-font.css';
 
diff --git a/assets/icons/tabler/arrow-left.svg b/assets/icons/tabler/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l6 6m-6-6l6-6"/></svg>
diff --git a/assets/icons/tabler/arrow-right.svg b/assets/icons/tabler/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-6 6l6-6m-6-6l6 6"/></svg>
diff --git a/assets/icons/tabler/ban.svg b/assets/icons/tabler/ban.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m2.7-6.3l12.6 12.6"/></svg>
diff --git a/assets/icons/tabler/brand-x.svg b/assets/icons/tabler/brand-x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4"/></svg>
diff --git a/assets/icons/tabler/calendar-month.svg b/assets/icons/tabler/calendar-month.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16M7 14h.013m2.997 0h.005m2.995 0h.005m3 0h.005m-3.005 3h.005m-6.01 0h.005m2.995 0h.005"/></svg>
diff --git a/assets/icons/tabler/code.svg b/assets/icons/tabler/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16"/></svg>
diff --git a/assets/icons/tabler/device-floppy.svg b/assets/icons/tabler/device-floppy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 4h10l4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2"/><path d="M10 14a2 2 0 1 0 4 0a2 2 0 1 0-4 0m4-10v4H8V4"/></g></svg>
diff --git a/assets/icons/tabler/eye.svg b/assets/icons/tabler/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/><path d="M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6"/></g></svg>
diff --git a/assets/icons/tabler/home.svg b/assets/icons/tabler/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/><path d="M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6"/></g></svg>
diff --git a/assets/icons/tabler/id-badge-2.svg b/assets/icons/tabler/id-badge-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 12h3v4H7z"/><path d="M10 6H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-6"/><path d="M10 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm4 12h2m-2-4h4"/></g></svg>
diff --git a/assets/icons/tabler/key.svg b/assets/icons/tabler/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1-4.069 0l-.301-.301l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.877 2.877 0 0 1 0-4.069l2.643-2.643a2.877 2.877 0 0 1 4.069 0M15 9h.01"/></svg>
diff --git a/assets/icons/tabler/list.svg b/assets/icons/tabler/list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01"/></svg>
diff --git a/assets/icons/tabler/lock.svg b/assets/icons/tabler/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z"/><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4"/></g></svg>
diff --git a/assets/icons/tabler/login.svg b/assets/icons/tabler/login.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2"/><path d="M21 12H8l3-3m0 6l-3-3"/></g></svg>
diff --git a/assets/icons/tabler/logout.svg b/assets/icons/tabler/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2"/><path d="M9 12h12l-3-3m0 6l3-3"/></g></svg>
diff --git a/assets/icons/tabler/message.svg b/assets/icons/tabler/message.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z"/></svg>
diff --git a/assets/icons/tabler/messages.svg b/assets/icons/tabler/messages.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 14l-3-3h-7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm-7 1v2a1 1 0 0 1-1 1H6l-3 3V11a1 1 0 0 1 1-1h2"/></svg>
diff --git a/assets/icons/tabler/pencil.svg b/assets/icons/tabler/pencil.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4"/></svg>
diff --git a/assets/icons/tabler/rss.svg b/assets/icons/tabler/rss.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9"/></svg>
diff --git a/assets/icons/tabler/search.svg b/assets/icons/tabler/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6"/></svg>
diff --git a/assets/icons/tabler/send.svg b/assets/icons/tabler/send.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z"/></svg>
diff --git a/assets/icons/tabler/settings.svg b/assets/icons/tabler/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0"/></g></svg>
diff --git a/assets/icons/tabler/tag.svg b/assets/icons/tabler/tag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0"/><path d="M3 6v5.172a2 2 0 0 0 .586 1.414l7.71 7.71a2.41 2.41 0 0 0 3.408 0l5.592-5.592a2.41 2.41 0 0 0 0-3.408l-7.71-7.71A2 2 0 0 0 11.172 3H6a3 3 0 0 0-3 3"/></g></svg>
diff --git a/assets/icons/tabler/tags.svg b/assets/icons/tabler/tags.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 8v4.172a2 2 0 0 0 .586 1.414l5.71 5.71a2.41 2.41 0 0 0 3.408 0l3.592-3.592a2.41 2.41 0 0 0 0-3.408l-5.71-5.71A2 2 0 0 0 9.172 6H5a2 2 0 0 0-2 2"/><path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01"/></g></svg>
diff --git a/assets/icons/tabler/trash.svg b/assets/icons/tabler/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>
diff --git a/assets/icons/tabler/user.svg b/assets/icons/tabler/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>
diff --git a/assets/icons/tabler/users-group.svg b/assets/icons/tabler/users-group.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1M15 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2 5h2a2 2 0 0 1 2 2v1M5 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h2"/></svg>
diff --git a/assets/icons/tabler/world.svg b/assets/icons/tabler/world.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m.6-3h16.8M3.6 15h16.8"/><path d="M11.5 3a17 17 0 0 0 0 18m1-18a17 17 0 0 1 0 18"/></g></svg>
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -268,7 +268,7 @@ footer {
   padding-bottom: 2em
 }
 
-footer p {
+footer p, footer a {
   color: var(--gray-700);
   font-size: 13px;
   margin-bottom: 0.25em
@@ -278,9 +278,7 @@ footer #footer-resources {
   text-align: right
 }
 
-footer #footer-resources i {
-  color: var(--gray-700);
-  font-size: 28.5px;
+footer #footer-resources svg {
   margin-left: 0.5em
 }
 
diff --git a/composer.json b/composer.json
@@ -42,6 +42,7 @@
         "symfony/string": "^7",
         "symfony/translation": "^7",
         "symfony/twig-bundle": "^7",
+        "symfony/ux-icons": "^2.20",
         "symfony/ux-live-component": "^2.6",
         "symfony/validator": "^7",
         "symfony/yaml": "^7",
diff --git a/config/bundles.php b/config/bundles.php
@@ -17,4 +17,5 @@
     Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
     Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
     Symfonycasts\SassBundle\SymfonycastsSassBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];
diff --git a/config/packages/ux_icons.yaml b/config/packages/ux_icons.yaml
@@ -0,0 +1,8 @@
+ux_icons:
+    default_icon_attributes:
+        width: 1.2em
+        height: 1.2em
+        style: 'position: relative; top: -2px;'
+
+    aliases:
+        'tabler:save-changes': 'tabler:device-floppy'
diff --git a/importmap.php b/importmap.php
@@ -71,18 +71,10 @@
         'version' => '11.9.0',
         'type' => 'css',
     ],
-    '@fortawesome/fontawesome-free/css/all.css' => [
-        'version' => '6.5.1',
-        'type' => 'css',
-    ],
     'lato-font/css/lato-font.css' => [
         'version' => '3.0.0',
         'type' => 'css',
     ],
-    '@fortawesome/fontawesome-free/css/v4-shims.css' => [
-        'version' => '6.5.1',
-        'type' => 'css',
-    ],
     'popper.js' => [
         'version' => '1.16.1',
     ],
diff --git a/templates/admin/blog/_delete_form.html.twig b/templates/admin/blog/_delete_form.html.twig
@@ -2,7 +2,7 @@
 <form action="{{ url('admin_post_delete', {id: post.id}) }}" method="post" data-confirmation="true" id="delete-form">
     <input type="hidden" name="token" value="{{ csrf_token('delete') }}" />
     <button type="submit" class="btn btn-block btn-danger">
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <twig:ux:icon name="tabler:trash"/>
         {{ 'action.delete_post'|trans }}
     </button>
 </form>
diff --git a/templates/admin/blog/_form.html.twig b/templates/admin/blog/_form.html.twig
@@ -15,12 +15,12 @@
     {{ form_widget(form) }}
 
     <button type="submit" class="{{ button_css|default("btn btn-primary") }}">
-        <i class="fa fa-save" aria-hidden="true"></i> {{ button_label|default('label.create_post'|trans) }}
+        <twig:ux:icon name="tabler:save-changes"/> {{ button_label|default('label.create_post'|trans) }}
     </button>
 
     {% if include_back_to_home_link|default(false) %}
         <a href="{{ path('admin_post_index') }}" class="btn btn-link">
-            <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'action.back_to_list'|trans }}
+            <twig:ux:icon name="tabler:list"/> {{ 'action.back_to_list'|trans }}
         </a>
     {% endif %}
 {{ form_end(form) }}
diff --git a/templates/admin/blog/edit.html.twig b/templates/admin/blog/edit.html.twig
@@ -15,7 +15,7 @@
 {% block sidebar %}
     <div class="section">
         <a href="{{ path('admin_post_show', {id: post.id}) }}" class="btn btn-lg btn-block btn-success">
-            <i class="fa fa-eye" aria-hidden="true"></i> {{ 'action.show_post'|trans }}
+            <twig:ux:icon name="tabler:eye"/> {{ 'action.show_post'|trans }}
         </a>
     </div>
 
diff --git a/templates/admin/blog/index.html.twig b/templates/admin/blog/index.html.twig
@@ -9,8 +9,8 @@
         <thead>
             <tr>
                 <th scope="col">{{ 'label.title'|trans }}</th>
-                <th scope="col"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'label.published_at'|trans }}</th>
-                <th scope="col" class="text-center"><i class="fa fa-cogs" aria-hidden="true"></i> {{ 'label.actions'|trans }}</th>
+                <th scope="col"><twig:ux:icon name="tabler:calendar-month"/> {{ 'label.published_at'|trans }}</th>
+                <th scope="col" class="text-center"><twig:ux:icon name="tabler:settings"/> {{ 'label.actions'|trans }}</th>
             </tr>
         </thead>
         <tbody>
@@ -24,11 +24,11 @@
                 <td class="text-right">
                     <div class="item-actions">
                         <a href="{{ path('admin_post_show', {id: post.id}) }}" class="btn btn-sm btn-secondary">
-                            <i class="fa fa-eye" aria-hidden="true"></i> {{ 'action.show'|trans }}
+                            <twig:ux:icon name="tabler:eye"/> {{ 'action.show'|trans }}
                         </a>
 
                         <a href="{{ path('admin_post_edit', {id: post.id}) }}" class="btn btn-sm btn-primary">
-                            <i class="fa fa-edit" aria-hidden="true"></i> {{ 'action.edit'|trans }}
+                            <twig:ux:icon name="tabler:pencil"/> {{ 'action.edit'|trans }}
                         </a>
                     </div>
                 </td>
@@ -45,7 +45,7 @@
 {% block sidebar %}
     <div class="section actions">
         <a href="{{ path('admin_post_new') }}" class="btn btn-lg btn-block btn-success">
-            <i class="fa fa-plus" aria-hidden="true"></i> {{ 'action.create_post'|trans }}
+            <twig:ux:icon name="tabler:pencil"/> {{ 'action.create_post'|trans }}
         </a>
     </div>
 
diff --git a/templates/admin/blog/new.html.twig b/templates/admin/blog/new.html.twig
@@ -13,11 +13,11 @@
         {{ form_row(form.tags) }}
 
         <button type="submit" class="btn btn-primary">
-            <i class="fa fa-save" aria-hidden="true"></i> {{ 'label.create_post'|trans }}
+            <twig:ux:icon name="tabler:save-changes"/> {{ 'label.create_post'|trans }}
         </button>
         {{ form_widget(form.saveAndCreateNew, {label: 'label.save_and_create_new', attr: {class: 'btn btn-primary'}}) }}
         <a href="{{ path('admin_post_index') }}" class="btn btn-link">
-            <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'action.back_to_list'|trans }}
+            <twig:ux:icon name="tabler:list"/> {{ 'action.back_to_list'|trans }}
         </a>
     {{ form_end(form) }}
 {% endblock %}
diff --git a/templates/admin/blog/show.html.twig b/templates/admin/blog/show.html.twig
@@ -6,8 +6,8 @@
     <h1>{{ post.title }}</h1>
 
     <p class="post-metadata">
-        <span class="metadata"><i class="fa fa-calendar"></i> {{ post.publishedAt|format_datetime('long', 'medium', '', 'UTC') }}</span>
-        <span class="metadata"><i class="fa fa-user"></i> {{ post.author.fullName }}</span>
+        <span class="metadata"><twig:ux:icon name="tabler:calendar-month"/> {{ post.publishedAt|format_datetime('long', 'medium', '', 'UTC') }}</span>
+        <span class="metadata"><twig:ux:icon name="tabler:user"/> {{ post.author.fullName }}</span>
     </p>
 
     <div class="jumbotron">
@@ -22,7 +22,7 @@
 {% block sidebar %}
     <div class="section">
         <a href="{{ path('admin_post_edit', {id: post.id}) }}" class="btn btn-lg btn-block btn-success">
-            <i class="fa fa-edit" aria-hidden="true"></i> {{ 'action.edit_contents'|trans }}
+            <twig:ux:icon name="tabler:pencil"/> {{ 'action.edit_contents'|trans }}
         </a>
     </div>
 
diff --git a/templates/admin/layout.html.twig b/templates/admin/layout.html.twig
@@ -15,12 +15,12 @@
 {% block header_navigation_links %}
     <li class="nav-item{{ _route in ['admin_index', 'admin_post_index'] ? ' active' : '' }}">
         <a class="nav-link" href="{{ path('admin_post_index') }}">
-            <i class="fa fa-list-alt" aria-hidden="true"></i> {{ 'menu.post_list'|trans }}
+            <twig:ux:icon name="tabler:list"/> {{ 'menu.post_list'|trans }}
         </a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="{{ path('blog_index') }}">
-            <i class="fa fa-home" aria-hidden="true"></i> {{ 'menu.back_to_blog'|trans }}
+            <twig:ux:icon name="tabler:home"/> {{ 'menu.back_to_blog'|trans }}
         </a>
     </li>
 {% endblock %}
diff --git a/templates/base.html.twig b/templates/base.html.twig
diff --git a/templates/blog/_comment_form.html.twig b/templates/blog/_comment_form.html.twig
diff --git a/templates/blog/_delete_post_confirmation.html.twig b/templates/blog/_delete_post_confirmation.html.twig
diff --git a/templates/blog/_post.html.twig b/templates/blog/_post.html.twig
diff --git a/templates/blog/_post_tags.html.twig b/templates/blog/_post_tags.html.twig
diff --git a/templates/blog/_rss.html.twig b/templates/blog/_rss.html.twig
diff --git a/templates/blog/index.html.twig b/templates/blog/index.html.twig
diff --git a/templates/blog/post_show.html.twig b/templates/blog/post_show.html.twig
diff --git a/templates/bundles/TwigBundle/Exception/error403.html.twig b/templates/bundles/TwigBundle/Exception/error403.html.twig
diff --git a/templates/debug/source_code.html.twig b/templates/debug/source_code.html.twig
diff --git a/templates/default/_language_selector.html.twig b/templates/default/_language_selector.html.twig
diff --git a/templates/default/homepage.html.twig b/templates/default/homepage.html.twig
diff --git a/templates/form/fields.html.twig b/templates/form/fields.html.twig
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
diff --git a/templates/user/change_password.html.twig b/templates/user/change_password.html.twig
diff --git a/templates/user/edit.html.twig b/templates/user/edit.html.twig
