NethServer · Tbaile · May 28, 2026 · May 22, 2026
diff --git a/src/components/standalone/FilterableListItemLayout.vue b/src/components/standalone/FilterableListItemLayout.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -15,6 +15,8 @@ import {
   NeTextInput,
   getAxiosErrorMessage
 } from '@nethesis/vue-components'
+import { faCircleInfo, faCirclePlus } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const props = defineProps<{
   fetchItemsFunction: () => Promise<T[]>
@@ -99,11 +101,11 @@ onMounted(() => {
       <div class="ml-2 shrink-0">
         <NeButton
           v-if="!readonly && items.length > 0"
-          kind="secondary"
+          kind="primary"
           @click="openCreateEditDrawer()"
         >
           <template #prefix>
-            <font-awesome-icon :icon="['fas', 'circle-plus']" class="h-4 w-4" aria-hidden="true" />
+            <FontAwesomeIcon :icon="faCirclePlus" class="h-4 w-4" aria-hidden="true" />
           </template>
           {{ addItemButtonLabel }}
         </NeButton>
@@ -125,23 +127,19 @@ onMounted(() => {
       <NeEmptyState
         v-if="items.length == 0"
         :title="noItemsFoundMessage"
-        :icon="['fas', 'circle-info']"
+        :icon="faCircleInfo"
         :class="[readonly ? 'pb-2' : '']"
-        ><NeButton v-if="!readonly" kind="primary" @click="openCreateEditDrawer()"
-          ><template #prefix>
-            <font-awesome-icon
-              :icon="['fas', 'circle-plus']"
-              class="h-4 w-4"
-              aria-hidden="true"
-            /> </template
+        ><NeButton v-if="!readonly" kind="primary" @click="openCreateEditDrawer()">
+          <template #prefix>
+            <FontAwesomeIcon :icon="faCirclePlus" class="h-4 w-4" aria-hidden="true" /> </template
           >{{ addItemButtonLabel }}</NeButton
         ></NeEmptyState
       >
       <NeEmptyState
         v-else-if="filteredItems.length == 0"
         :title="noFilteredItemsFoundMessage"
         :description="noFilteredItemsFoundDescription"
-        :icon="['fas', 'circle-info']"
+        :icon="faCircleInfo"
       />
       <slot
         v-else

diff --git a/src/components/standalone/backup_and_restore/MigrationContent.vue b/src/components/standalone/backup_and_restore/MigrationContent.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -10,6 +10,7 @@ import { NeLink, NeInlineNotification, NeButton } from '@nethesis/vue-components
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import MigrationDrawer from '@/components/standalone/backup_and_restore/MigrationDrawer.vue'
 import FormLayout from '@/components/standalone/FormLayout.vue'
+import { faArrowCircleUp, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 
 const { t } = useI18n()
 
@@ -38,7 +39,7 @@ function successMigration() {
           {{ t('standalone.backup_and_restore.migration.description') }}
           <div class="mt-4">
             <NeLink href="https://docs.nethsecurity.org/en/latest/migration.html" target="_blank">
-              <FontAwesomeIcon class="mr-2" :icon="['fa', 'arrow-up-right-from-square']" />
+              <FontAwesomeIcon class="mr-2" :icon="faArrowUpRightFromSquare" />
               {{ t('standalone.backup_and_restore.migration.description_link') }}
             </NeLink>
           </div>
@@ -48,13 +49,13 @@ function successMigration() {
         <div class="mr-auto self-start">
           <NeButton
             class="ml-6"
-            kind="secondary"
+            kind="primary"
             size="lg"
             type="submit"
             @click="showMigrationDrawer = true"
           >
             <template #prefix>
-              <FontAwesomeIcon :icon="['fa', 'arrow-circle-up']" />
+              <FontAwesomeIcon :icon="faArrowCircleUp" />
             </template>
             {{ t('standalone.backup_and_restore.migration.upload_file') }}
           </NeButton>

diff --git a/src/components/standalone/backup_and_restore/RestoreContent.vue b/src/components/standalone/backup_and_restore/RestoreContent.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -28,6 +28,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { validateRequired } from '@/lib/validation'
 import FormLayout from '@/components/standalone/FormLayout.vue'
 import { uploadFile } from '@/lib/standalone/fileUpload'
+import { faRotate } from '@fortawesome/free-solid-svg-icons'
 
 const { t } = useI18n()
 const RESTORE_WAIT_TIME = 45000
@@ -291,13 +292,13 @@ function setRestoreTimer() {
           <div class="mr-auto self-start">
             <NeButton
               class="ml-"
-              kind="secondary"
+              kind="primary"
               size="lg"
               type="submit"
               @click="showRestoreDrawer = true"
             >
               <template #prefix>
-                <FontAwesomeIcon :icon="['fa', 'rotate']" />
+                <FontAwesomeIcon :icon="faRotate" />
               </template>
               {{ t('standalone.backup_and_restore.restore.restore_backup') }}
             </NeButton>

diff --git a/src/components/standalone/dns_dhcp/DnsManager.vue b/src/components/standalone/dns_dhcp/DnsManager.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -25,6 +25,8 @@ import {
   validateRequired
 } from '@/lib/validation'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import { faFloppyDisk } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const { t } = useI18n()
 const uciChangesStore = useUciPendingChangesStore()
@@ -167,18 +169,15 @@ onMounted(() => {
       </NeTextInput>
       <NeToggle v-model="logDnsQueries" :label="t('standalone.dns_dhcp.log_dns_queries')" />
       <hr />
-      <div class="flex justify-end">
+      <div class="flex justify-start">
         <NeButton
           kind="primary"
           :disabled="isUpdatingDnsConfig"
           :loading="isUpdatingDnsConfig"
           @click="updateDnsConfig"
-          ><template #prefix>
-            <font-awesome-icon
-              :icon="['fas', 'floppy-disk']"
-              class="h-4 w-4"
-              aria-hidden="true"
-            /> </template
+        >
+          <template #prefix>
+            <FontAwesomeIcon :icon="faFloppyDisk" class="h-4 w-4" aria-hidden="true" /> </template
           >{{ t('common.save') }}</NeButton
         >
       </div>

diff --git a/src/components/standalone/dns_dhcp/DnsRecordsTable.vue b/src/components/standalone/dns_dhcp/DnsRecordsTable.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -9,7 +9,8 @@ import NeTable from '../NeTable.vue'
 import { NeDropdown } from '@nethesis/vue-components'
 import { NeButton } from '@nethesis/vue-components'
 import type { DnsRecord } from './DnsRecords.vue'
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faCircleCheck, faPenToSquare, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const { t } = useI18n()
 
@@ -64,9 +65,14 @@ function getDropdownItems(item: DnsRecord) {
     </template>
     <template #wildcard="{ item }: { item: DnsRecord }">
       <div :class="['flex', 'flex-row', 'items-center']">
-        <font-awesome-icon
-          :icon="['fas', item.wildcard ? 'circle-check' : 'circle-xmark']"
-          class="mr-2 h-5 w-5"
+        <FontAwesomeIcon
+          :icon="item.wildcard ? faCircleCheck : faXmark"
+          :class="[
+            'mr-2',
+            'h-5',
+            'w-5',
+            item.wildcard ? 'text-green-700 dark:text-green-500' : 'text-red-700 dark:text-red-500'
+          ]"
           aria-hidden="true"
         />
         {{ item.wildcard ? t('standalone.dns_dhcp.enabled') : t('standalone.dns_dhcp.disabled') }}
@@ -76,11 +82,7 @@ function getDropdownItems(item: DnsRecord) {
       <div class="align-center flex justify-end">
         <NeButton kind="tertiary" @click="emit('record-edit', item)">
           <template #prefix>
-            <font-awesome-icon
-              :icon="['fas', 'pen-to-square']"
-              class="h-4 w-4"
-              aria-hidden="true"
-            />
+            <FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4" aria-hidden="true" />
           </template>
           {{ t('common.edit') }}
         </NeButton>

diff --git a/src/components/standalone/dns_dhcp/StaticLeases.vue b/src/components/standalone/dns_dhcp/StaticLeases.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -151,7 +151,7 @@ function clearFilters() {
         {{ t('standalone.dns_dhcp.static_leases_description') }}
       </p>
       <div class="ml-2 shrink-0">
-        <NeButton v-if="items.length > 0" kind="secondary" @click="openCreateEditDrawer()">
+        <NeButton v-if="items.length > 0" kind="primary" @click="openCreateEditDrawer()">
           <template #prefix>
             <FontAwesomeIcon :icon="faCirclePlus" class="h-4 w-4" aria-hidden="true" />
           </template>

diff --git a/src/components/standalone/dpi/DpiExceptions.vue b/src/components/standalone/dpi/DpiExceptions.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -18,6 +18,8 @@ import DeleteDpiExceptionModal from './DeleteDpiExceptionModal.vue'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
 import DpiExceptionCard from './DpiExceptionCard.vue'
 import CreateOrDeleteDpiExceptionDrawer from './CreateOrDeleteDpiExceptionDrawer.vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCircleInfo, faCirclePlus } from '@fortawesome/free-solid-svg-icons'
 
 export type DpiException = {
   'config-name': string
@@ -83,13 +85,9 @@ onMounted(() => {
       </p>
       <template v-if="exceptions.length > 0">
         <div class="ml-2 flex shrink-0 flex-col gap-x-0 gap-y-2 sm:flex-row sm:gap-x-2 sm:gap-y-0">
-          <NeButton kind="secondary" @click="openCreateEditDrawer(null)">
+          <NeButton kind="primary" @click="openCreateEditDrawer(null)">
             <template #prefix>
-              <font-awesome-icon
-                :icon="['fas', 'circle-plus']"
-                class="h-4 w-4"
-                aria-hidden="true"
-              />
+              <FontAwesomeIcon :icon="faCirclePlus" class="h-4 w-4" aria-hidden="true" />
             </template>
             {{ t('standalone.dpi.add_exception') }}
           </NeButton>
@@ -110,14 +108,10 @@ onMounted(() => {
       <NeEmptyState
         v-if="exceptions.length == 0"
         :title="t('standalone.dpi.no_exception_found')"
-        :icon="['fas', 'circle-info']"
+        :icon="faCircleInfo"
         ><NeButton kind="primary" @click="openCreateEditDrawer(null)"
           ><template #prefix>
-            <font-awesome-icon
-              :icon="['fas', 'circle-plus']"
-              class="h-4 w-4"
-              aria-hidden="true"
-            /> </template
+            <FontAwesomeIcon :icon="faCirclePlus" class="h-4 w-4" aria-hidden="true" /> </template
           >{{ t('standalone.dpi.add_exception') }}</NeButton
         ></NeEmptyState
       >

diff --git a/src/components/standalone/dpi/DpiRules.vue b/src/components/standalone/dpi/DpiRules.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -22,6 +22,8 @@ import DeleteDpiRuleModal from '@/components/standalone/dpi/DeleteDpiRuleModal.v
 import { ubusCall } from '@/lib/standalone/ubus'
 import { useFirewallStore } from '@/stores/standalone/firewall'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import { faCircleInfo, faCirclePlus } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const { t } = useI18n()
 const firewallConfig = useFirewallStore()
@@ -91,13 +93,13 @@ function showDeleteRuleModal(rule: DpiRule) {
       </div>
       <NeButton
         v-if="rules.length"
-        kind="secondary"
+        kind="primary"
         size="lg"
         class="ml-6 shrink-0"
         @click="showCreateRuleModal"
       >
         <template #prefix>
-          <FontAwesomeIcon :icon="['fas', 'circle-plus']" aria-hidden="true" />
+          <FontAwesomeIcon :icon="faCirclePlus" aria-hidden="true" />
         </template>
         {{ t('standalone.dpi.create_rule') }}</NeButton
       >
@@ -125,11 +127,11 @@ function showDeleteRuleModal(rule: DpiRule) {
       <NeEmptyState
         v-if="isEmpty(rules)"
         :title="t('standalone.dpi.no_rules_found')"
-        :icon="['fas', 'circle-info']"
+        :icon="faCircleInfo"
       >
         <NeButton kind="primary" size="lg" @click="showCreateRuleModal">
           <template #prefix>
-            <FontAwesomeIcon :icon="['fas', 'circle-plus']" aria-hidden="true" />
+            <FontAwesomeIcon :icon="faCirclePlus" aria-hidden="true" />
           </template>
           {{ t('standalone.dpi.create_rule') }}</NeButton
         >

diff --git a/src/components/standalone/factory_reset/FactoryResetContent.vue b/src/components/standalone/factory_reset/FactoryResetContent.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -18,6 +18,7 @@ import {
 import { NeModal } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import FormLayout from '@/components/standalone/FormLayout.vue'
+import { faArrowRotateLeft, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 
 const { t } = useI18n()
 const RESET_WAIT_TIME = 45000
@@ -124,7 +125,7 @@ function setResetTimer() {
           </p>
           <div class="flex">
             <FontAwesomeIcon
-              :icon="['fa', 'circle-info']"
+              :icon="faCircleInfo"
               class="mt-1 mr-2 text-indigo-700 dark:text-indigo-300"
             />
             <p class="mb-8">
@@ -137,9 +138,9 @@ function setResetTimer() {
             {{ t('standalone.factory_reset.current_version') }}: {{ currentVersion }}
           </p>
           <div>
-            <NeButton kind="secondary" @click="showModalFactoryReset = true">
+            <NeButton kind="primary" @click="showModalFactoryReset = true">
               <template #prefix>
-                <FontAwesomeIcon :icon="['fa', 'arrow-rotate-left']" aria-hidden="true" />
+                <FontAwesomeIcon :icon="faArrowRotateLeft" aria-hidden="true" />
               </template>
               {{ t('standalone.factory_reset.perform_factory_reset') }}
             </NeButton>

diff --git a/src/components/standalone/firewall/conntrack/ConntrackContent.vue b/src/components/standalone/firewall/conntrack/ConntrackContent.vue
@@ -1,5 +1,5 @@
 <!--
-  Copyright (C) 2024 Nethesis S.r.l.
+  Copyright (C) 2026 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
@@ -156,7 +156,7 @@ function onRecordDeleted() {
           </template>
           {{ t('standalone.conntrack.delete_all') }}
         </NeButton>
-        <NeButton kind="secondary" size="lg" @click="fetchConntrack()">
+        <NeButton kind="primary" size="lg" @click="fetchConntrack()">
           <template #prefix>
             <FontAwesomeIcon :icon="faRefresh" aria-hidden="true" />
           </template>