diff --git a/frontend/src/app/admin/servicos/[id]/editar/page.tsx b/frontend/src/app/admin/servicos/[id]/editar/page.tsx
index 5269c11..55c4dc9 100644
--- a/frontend/src/app/admin/servicos/[id]/editar/page.tsx
+++ b/frontend/src/app/admin/servicos/[id]/editar/page.tsx
@@ -1,28 +1,79 @@
 "use client";
 
-import { useState, useEffect, use } from 'react';
+import { useState, useEffect, use, useMemo } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useToast } from '@/contexts/ToastContext';
 
-// Ícones disponíveis do Remix Icon
-const ICON_OPTIONS = [
-  { value: 'ri-settings-3-line', label: 'Configurações' },
-  { value: 'ri-tools-line', label: 'Ferramentas' },
-  { value: 'ri-truck-line', label: 'Caminhão' },
-  { value: 'ri-bus-line', label: 'Ônibus' },
-  { value: 'ri-car-line', label: 'Carro' },
-  { value: 'ri-roadster-line', label: 'Veículo Esportivo' },
-  { value: 'ri-shield-check-line', label: 'Segurança' },
-  { value: 'ri-file-chart-line', label: 'Laudo/Relatório' },
-  { value: 'ri-draft-line', label: 'Documento' },
-  { value: 'ri-building-2-line', label: 'Empresa' },
-  { value: 'ri-home-gear-line', label: 'Manutenção' },
-  { value: 'ri-compass-3-line', label: 'Engenharia' },
-  { value: 'ri-ruler-line', label: 'Medição' },
-  { value: 'ri-flashlight-line', label: 'Inspeção' },
-  { value: 'ri-hard-drive-2-line', label: 'Equipamento' },
-  { value: 'ri-cpu-line', label: 'Tecnologia' },
+// Lista expandida de ícones do Remix Icon organizados por categoria
+const ICON_LIST = [
+  // Veículos e Transporte
+  { value: 'ri-truck-line', label: 'Caminhão', category: 'veiculos' },
+  { value: 'ri-truck-fill', label: 'Caminhão Preenchido', category: 'veiculos' },
+  { value: 'ri-bus-line', label: 'Ônibus', category: 'veiculos' },
+  { value: 'ri-car-line', label: 'Carro', category: 'veiculos' },
+  { value: 'ri-roadster-line', label: 'Veículo Esportivo', category: 'veiculos' },
+  { value: 'ri-taxi-line', label: 'Táxi', category: 'veiculos' },
+  { value: 'ri-caravan-line', label: 'Trailer', category: 'veiculos' },
+  
+  // Ferramentas e Engenharia
+  { value: 'ri-tools-line', label: 'Ferramentas', category: 'engenharia' },
+  { value: 'ri-tools-fill', label: 'Ferramentas Preenchido', category: 'engenharia' },
+  { value: 'ri-hammer-line', label: 'Martelo', category: 'engenharia' },
+  { value: 'ri-screwdriver-line', label: 'Chave de Fenda', category: 'engenharia' },
+  { value: 'ri-settings-3-line', label: 'Configurações', category: 'engenharia' },
+  { value: 'ri-settings-4-line', label: 'Engrenagem', category: 'engenharia' },
+  { value: 'ri-compass-3-line', label: 'Compasso', category: 'engenharia' },
+  { value: 'ri-ruler-line', label: 'Régua', category: 'engenharia' },
+  { value: 'ri-ruler-2-line', label: 'Régua 2', category: 'engenharia' },
+  { value: 'ri-pencil-ruler-line', label: 'Lápis e Régua', category: 'engenharia' },
+  
+  // Documentos e Laudos
+  { value: 'ri-draft-line', label: 'Documento', category: 'documentos' },
+  { value: 'ri-file-text-line', label: 'Arquivo Texto', category: 'documentos' },
+  { value: 'ri-file-chart-line', label: 'Relatório', category: 'documentos' },
+  { value: 'ri-file-paper-2-line', label: 'Laudo', category: 'documentos' },
+  { value: 'ri-file-list-3-line', label: 'Lista', category: 'documentos' },
+  { value: 'ri-clipboard-line', label: 'Prancheta', category: 'documentos' },
+  { value: 'ri-survey-line', label: 'Pesquisa', category: 'documentos' },
+  { value: 'ri-task-line', label: 'Tarefa', category: 'documentos' },
+  
+  // Segurança
+  { value: 'ri-shield-check-line', label: 'Escudo Check', category: 'seguranca' },
+  { value: 'ri-shield-line', label: 'Escudo', category: 'seguranca' },
+  { value: 'ri-shield-star-line', label: 'Escudo Estrela', category: 'seguranca' },
+  { value: 'ri-safe-line', label: 'Cofre', category: 'seguranca' },
+  { value: 'ri-alarm-warning-line', label: 'Alerta', category: 'seguranca' },
+  { value: 'ri-error-warning-line', label: 'Aviso', category: 'seguranca' },
+  
+  // Construção e Equipamentos
+  { value: 'ri-building-2-line', label: 'Prédio', category: 'construcao' },
+  { value: 'ri-building-line', label: 'Edifício', category: 'construcao' },
+  { value: 'ri-home-gear-line', label: 'Casa Engrenagem', category: 'construcao' },
+  { value: 'ri-home-line', label: 'Casa', category: 'construcao' },
+  { value: 'ri-store-2-line', label: 'Loja', category: 'construcao' },
+  
+  // Inspeção e Verificação
+  { value: 'ri-search-eye-line', label: 'Inspeção', category: 'inspecao' },
+  { value: 'ri-flashlight-line', label: 'Lanterna', category: 'inspecao' },
+  { value: 'ri-eye-line', label: 'Olho', category: 'inspecao' },
+  { value: 'ri-zoom-in-line', label: 'Zoom', category: 'inspecao' },
+  { value: 'ri-checkbox-circle-line', label: 'Check Círculo', category: 'inspecao' },
+  { value: 'ri-check-double-line', label: 'Duplo Check', category: 'inspecao' },
+  
+  // Geral
+  { value: 'ri-lightbulb-line', label: 'Lâmpada', category: 'geral' },
+  { value: 'ri-cpu-line', label: 'CPU', category: 'geral' },
+  { value: 'ri-dashboard-3-line', label: 'Painel', category: 'geral' },
+  { value: 'ri-bar-chart-box-line', label: 'Gráfico', category: 'geral' },
+  { value: 'ri-pie-chart-line', label: 'Pizza', category: 'geral' },
+  { value: 'ri-team-line', label: 'Equipe', category: 'geral' },
+  { value: 'ri-user-settings-line', label: 'Usuário Config', category: 'geral' },
+  { value: 'ri-customer-service-line', label: 'Suporte', category: 'geral' },
+  { value: 'ri-hand-heart-line', label: 'Cuidado', category: 'geral' },
+  { value: 'ri-award-line', label: 'Prêmio', category: 'geral' },
+  { value: 'ri-medal-line', label: 'Medalha', category: 'geral' },
+  { value: 'ri-verified-badge-line', label: 'Verificado', category: 'geral' },
 ];
 
 export default function EditService({ params }: { params: Promise<{ id: string }> }) {
@@ -31,6 +82,8 @@ export default function EditService({ params }: { params: Promise<{ id: string }
   const { success, error } = useToast();
   const [loadingData, setLoadingData] = useState(true);
   const [loading, setLoading] = useState(false);
+  const [iconSearch, setIconSearch] = useState('');
+  const [showIconPicker, setShowIconPicker] = useState(false);
   const [formData, setFormData] = useState({
     title: '',
     icon: 'ri-settings-3-line',
@@ -40,6 +93,17 @@ export default function EditService({ params }: { params: Promise<{ id: string }
     fullDescription: ''
   });
 
+  // Filtrar ícones pela busca
+  const filteredIcons = useMemo(() => {
+    if (!iconSearch) return ICON_LIST;
+    const search = iconSearch.toLowerCase();
+    return ICON_LIST.filter(icon => 
+      icon.label.toLowerCase().includes(search) || 
+      icon.value.toLowerCase().includes(search) ||
+      icon.category.toLowerCase().includes(search)
+    );
+  }, [iconSearch]);
+
   // Carregar dados do serviço
   useEffect(() => {
     async function fetchService() {
@@ -154,56 +218,103 @@ export default function EditService({ params }: { params: Promise<{ id: string }
               />
             </div>
 
-            <div>
-              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Ícone</label>
-              <div className="flex gap-3">
+            <div className="md:col-span-2">
+              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Ícone do Serviço</label>
+              
+              {/* Ícone selecionado */}
+              <div 
+                onClick={() => setShowIconPicker(!showIconPicker)}
+                className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl cursor-pointer hover:border-primary transition-colors"
+              >
                 <div className="w-14 h-14 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center">
                   <i className={`${formData.icon} text-2xl text-primary`}></i>
                 </div>
-                <select 
-                  value={formData.icon}
-                  onChange={(e) => setFormData({...formData, icon: e.target.value})}
-                  className="flex-1 px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
-                >
-                  {ICON_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>{option.label}</option>
-                  ))}
-                </select>
+                <div className="flex-1">
+                  <p className="font-medium text-gray-900 dark:text-white">{ICON_LIST.find(i => i.value === formData.icon)?.label || formData.icon}</p>
+                  <p className="text-sm text-gray-500">{formData.icon}</p>
+                </div>
+                <i className={`ri-arrow-${showIconPicker ? 'up' : 'down'}-s-line text-xl text-gray-400`}></i>
               </div>
-              <p className="text-xs text-gray-500 mt-2">Ou digite manualmente uma classe do Remix Icon</p>
-              <input 
-                type="text" 
-                value={formData.icon}
-                onChange={(e) => setFormData({...formData, icon: e.target.value})}
-                className="mt-2 w-full px-4 py-2 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
-                placeholder="ri-icon-name"
-              />
+
+              {/* Picker de ícones */}
+              {showIconPicker && (
+                <div className="mt-3 p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl shadow-lg">
+                  {/* Busca */}
+                  <div className="relative mb-4">
+                    <i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                    <input
+                      type="text"
+                      placeholder="Buscar ícone..."
+                      value={iconSearch}
+                      onChange={(e) => setIconSearch(e.target.value)}
+                      className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-primary text-sm"
+                    />
+                  </div>
+
+                  {/* Grade de ícones */}
+                  <div className="grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 gap-2 max-h-64 overflow-y-auto">
+                    {filteredIcons.map((icon) => (
+                      <button
+                        key={icon.value}
+                        type="button"
+                        onClick={() => {
+                          setFormData({...formData, icon: icon.value});
+                          setShowIconPicker(false);
+                          setIconSearch('');
+                        }}
+                        className={`w-10 h-10 rounded-lg flex items-center justify-center transition-all ${
+                          formData.icon === icon.value 
+                            ? 'bg-primary text-white' 
+                            : 'bg-gray-100 dark:bg-white/5 text-gray-600 dark:text-gray-400 hover:bg-primary/10 hover:text-primary'
+                        }`}
+                        title={icon.label}
+                      >
+                        <i className={`${icon.value} text-lg`}></i>
+                      </button>
+                    ))}
+                  </div>
+
+                  {filteredIcons.length === 0 && (
+                    <p className="text-center text-gray-500 py-4 text-sm">Nenhum ícone encontrado</p>
+                  )}
+
+                  {/* Input manual */}
+                  <div className="mt-4 pt-4 border-t border-gray-200 dark:border-white/10">
+                    <p className="text-xs text-gray-500 mb-2">Ou digite manualmente uma classe do Remix Icon:</p>
+                    <input 
+                      type="text" 
+                      value={formData.icon}
+                      onChange={(e) => setFormData({...formData, icon: e.target.value})}
+                      className="w-full px-3 py-2 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg text-gray-900 dark:text-white text-sm focus:outline-none focus:border-primary"
+                      placeholder="ri-icon-name"
+                    />
+                  </div>
+                </div>
+              )}
             </div>
 
-            <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Status</label>
-                <select 
-                  value={formData.active ? 'active' : 'inactive'}
-                  onChange={(e) => setFormData({...formData, active: e.target.value === 'active'})}
-                  className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
-                >
-                  <option value="active">Ativo</option>
-                  <option value="inactive">Inativo</option>
-                </select>
-              </div>
+            <div>
+              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Status</label>
+              <select 
+                value={formData.active ? 'active' : 'inactive'}
+                onChange={(e) => setFormData({...formData, active: e.target.value === 'active'})}
+                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
+              >
+                <option value="active">Ativo</option>
+                <option value="inactive">Inativo</option>
+              </select>
+            </div>
 
-              <div>
-                <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Ordem de Exibição</label>
-                <input 
-                  type="number" 
-                  value={formData.order}
-                  onChange={(e) => setFormData({...formData, order: parseInt(e.target.value) || 0})}
-                  className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
-                  min="0"
-                />
-                <p className="text-xs text-gray-500 mt-1">Menor número = aparece primeiro</p>
-              </div>
+            <div>
+              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Ordem de Exibição</label>
+              <input 
+                type="number" 
+                value={formData.order}
+                onChange={(e) => setFormData({...formData, order: parseInt(e.target.value) || 0})}
+                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+                min="0"
+              />
+              <p className="text-xs text-gray-500 mt-1">Menor número = aparece primeiro</p>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/admin/servicos/novo/page.tsx b/frontend/src/app/admin/servicos/novo/page.tsx
index 779bfff..b3a1eae 100644
--- a/frontend/src/app/admin/servicos/novo/page.tsx
+++ b/frontend/src/app/admin/servicos/novo/page.tsx
@@ -1,14 +1,87 @@
 "use client";
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useToast } from '@/contexts/ToastContext';
 
+// Lista expandida de ícones do Remix Icon organizados por categoria
+const ICON_LIST = [
+  // Veículos e Transporte
+  { value: 'ri-truck-line', label: 'Caminhão', category: 'veiculos' },
+  { value: 'ri-truck-fill', label: 'Caminhão Preenchido', category: 'veiculos' },
+  { value: 'ri-bus-line', label: 'Ônibus', category: 'veiculos' },
+  { value: 'ri-car-line', label: 'Carro', category: 'veiculos' },
+  { value: 'ri-roadster-line', label: 'Veículo Esportivo', category: 'veiculos' },
+  { value: 'ri-taxi-line', label: 'Táxi', category: 'veiculos' },
+  { value: 'ri-caravan-line', label: 'Trailer', category: 'veiculos' },
+  
+  // Ferramentas e Engenharia
+  { value: 'ri-tools-line', label: 'Ferramentas', category: 'engenharia' },
+  { value: 'ri-tools-fill', label: 'Ferramentas Preenchido', category: 'engenharia' },
+  { value: 'ri-hammer-line', label: 'Martelo', category: 'engenharia' },
+  { value: 'ri-screwdriver-line', label: 'Chave de Fenda', category: 'engenharia' },
+  { value: 'ri-settings-3-line', label: 'Configurações', category: 'engenharia' },
+  { value: 'ri-settings-4-line', label: 'Engrenagem', category: 'engenharia' },
+  { value: 'ri-compass-3-line', label: 'Compasso', category: 'engenharia' },
+  { value: 'ri-ruler-line', label: 'Régua', category: 'engenharia' },
+  { value: 'ri-ruler-2-line', label: 'Régua 2', category: 'engenharia' },
+  { value: 'ri-pencil-ruler-line', label: 'Lápis e Régua', category: 'engenharia' },
+  
+  // Documentos e Laudos
+  { value: 'ri-draft-line', label: 'Documento', category: 'documentos' },
+  { value: 'ri-file-text-line', label: 'Arquivo Texto', category: 'documentos' },
+  { value: 'ri-file-chart-line', label: 'Relatório', category: 'documentos' },
+  { value: 'ri-file-paper-2-line', label: 'Laudo', category: 'documentos' },
+  { value: 'ri-file-list-3-line', label: 'Lista', category: 'documentos' },
+  { value: 'ri-clipboard-line', label: 'Prancheta', category: 'documentos' },
+  { value: 'ri-survey-line', label: 'Pesquisa', category: 'documentos' },
+  { value: 'ri-task-line', label: 'Tarefa', category: 'documentos' },
+  
+  // Segurança
+  { value: 'ri-shield-check-line', label: 'Escudo Check', category: 'seguranca' },
+  { value: 'ri-shield-line', label: 'Escudo', category: 'seguranca' },
+  { value: 'ri-shield-star-line', label: 'Escudo Estrela', category: 'seguranca' },
+  { value: 'ri-safe-line', label: 'Cofre', category: 'seguranca' },
+  { value: 'ri-alarm-warning-line', label: 'Alerta', category: 'seguranca' },
+  { value: 'ri-error-warning-line', label: 'Aviso', category: 'seguranca' },
+  
+  // Construção e Equipamentos
+  { value: 'ri-building-2-line', label: 'Prédio', category: 'construcao' },
+  { value: 'ri-building-line', label: 'Edifício', category: 'construcao' },
+  { value: 'ri-home-gear-line', label: 'Casa Engrenagem', category: 'construcao' },
+  { value: 'ri-home-line', label: 'Casa', category: 'construcao' },
+  { value: 'ri-store-2-line', label: 'Loja', category: 'construcao' },
+  
+  // Inspeção e Verificação
+  { value: 'ri-search-eye-line', label: 'Inspeção', category: 'inspecao' },
+  { value: 'ri-flashlight-line', label: 'Lanterna', category: 'inspecao' },
+  { value: 'ri-eye-line', label: 'Olho', category: 'inspecao' },
+  { value: 'ri-zoom-in-line', label: 'Zoom', category: 'inspecao' },
+  { value: 'ri-checkbox-circle-line', label: 'Check Círculo', category: 'inspecao' },
+  { value: 'ri-check-double-line', label: 'Duplo Check', category: 'inspecao' },
+  
+  // Geral
+  { value: 'ri-lightbulb-line', label: 'Lâmpada', category: 'geral' },
+  { value: 'ri-cpu-line', label: 'CPU', category: 'geral' },
+  { value: 'ri-dashboard-3-line', label: 'Painel', category: 'geral' },
+  { value: 'ri-bar-chart-box-line', label: 'Gráfico', category: 'geral' },
+  { value: 'ri-pie-chart-line', label: 'Pizza', category: 'geral' },
+  { value: 'ri-team-line', label: 'Equipe', category: 'geral' },
+  { value: 'ri-user-settings-line', label: 'Usuário Config', category: 'geral' },
+  { value: 'ri-customer-service-line', label: 'Suporte', category: 'geral' },
+  { value: 'ri-hand-heart-line', label: 'Cuidado', category: 'geral' },
+  { value: 'ri-award-line', label: 'Prêmio', category: 'geral' },
+  { value: 'ri-medal-line', label: 'Medalha', category: 'geral' },
+  { value: 'ri-verified-badge-line', label: 'Verificado', category: 'geral' },
+];
+
 export default function NewService() {
   const router = useRouter();
   const { success, error } = useToast();
   const [loading, setLoading] = useState(false);
+  const [iconSearch, setIconSearch] = useState('');
+  const [showIconPicker, setShowIconPicker] = useState(false);
   const [formData, setFormData] = useState({
     title: '',
     icon: 'ri-settings-3-line',
@@ -18,6 +91,17 @@ export default function NewService() {
     fullDescription: ''
   });
 
+  // Filtrar ícones pela busca
+  const filteredIcons = useMemo(() => {
+    if (!iconSearch) return ICON_LIST;
+    const search = iconSearch.toLowerCase();
+    return ICON_LIST.filter(icon => 
+      icon.label.toLowerCase().includes(search) || 
+      icon.value.toLowerCase().includes(search) ||
+      icon.category.toLowerCase().includes(search)
+    );
+  }, [iconSearch]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     
@@ -92,24 +176,79 @@ export default function NewService() {
               />
             </div>
 
-            <div>
-              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Ícone (Remix Icon Class)</label>
-              <div className="flex gap-3">
-                <div className="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center text-xl shrink-0">
-                  <i className={formData.icon}></i>
+            <div className="md:col-span-2">
+              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Ícone do Serviço</label>
+              
+              {/* Ícone selecionado */}
+              <div 
+                onClick={() => setShowIconPicker(!showIconPicker)}
+                className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl cursor-pointer hover:border-primary transition-colors"
+              >
+                <div className="w-14 h-14 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center">
+                  <i className={`${formData.icon} text-2xl text-primary`}></i>
                 </div>
-                <input 
-                  type="text" 
-                  value={formData.icon}
-                  onChange={(e) => setFormData({...formData, icon: e.target.value})}
-                  className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
-                  placeholder="Ex: ri-truck-line"
-                  required
-                />
+                <div className="flex-1">
+                  <p className="font-medium text-gray-900 dark:text-white">{ICON_LIST.find(i => i.value === formData.icon)?.label || formData.icon}</p>
+                  <p className="text-sm text-gray-500">{formData.icon}</p>
+                </div>
+                <i className={`ri-arrow-${showIconPicker ? 'up' : 'down'}-s-line text-xl text-gray-400`}></i>
               </div>
-              <p className="text-xs text-gray-500 mt-2">
-                Consulte a lista de ícones em <a href="https://remixicon.com" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">remixicon.com</a>
-              </p>
+
+              {/* Picker de ícones */}
+              {showIconPicker && (
+                <div className="mt-3 p-4 bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl shadow-lg">
+                  {/* Busca */}
+                  <div className="relative mb-4">
+                    <i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                    <input
+                      type="text"
+                      placeholder="Buscar ícone..."
+                      value={iconSearch}
+                      onChange={(e) => setIconSearch(e.target.value)}
+                      className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:border-primary text-sm"
+                    />
+                  </div>
+
+                  {/* Grade de ícones */}
+                  <div className="grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 gap-2 max-h-64 overflow-y-auto">
+                    {filteredIcons.map((icon) => (
+                      <button
+                        key={icon.value}
+                        type="button"
+                        onClick={() => {
+                          setFormData({...formData, icon: icon.value});
+                          setShowIconPicker(false);
+                          setIconSearch('');
+                        }}
+                        className={`w-10 h-10 rounded-lg flex items-center justify-center transition-all ${
+                          formData.icon === icon.value 
+                            ? 'bg-primary text-white' 
+                            : 'bg-gray-100 dark:bg-white/5 text-gray-600 dark:text-gray-400 hover:bg-primary/10 hover:text-primary'
+                        }`}
+                        title={icon.label}
+                      >
+                        <i className={`${icon.value} text-lg`}></i>
+                      </button>
+                    ))}
+                  </div>
+
+                  {filteredIcons.length === 0 && (
+                    <p className="text-center text-gray-500 py-4 text-sm">Nenhum ícone encontrado</p>
+                  )}
+
+                  {/* Input manual */}
+                  <div className="mt-4 pt-4 border-t border-gray-200 dark:border-white/10">
+                    <p className="text-xs text-gray-500 mb-2">Ou digite manualmente uma classe do Remix Icon:</p>
+                    <input 
+                      type="text" 
+                      value={formData.icon}
+                      onChange={(e) => setFormData({...formData, icon: e.target.value})}
+                      className="w-full px-3 py-2 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg text-gray-900 dark:text-white text-sm focus:outline-none focus:border-primary"
+                      placeholder="ri-icon-name"
+                    />
+                  </div>
+                </div>
+              )}
             </div>
 
             <div>