Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Fundamentos Iconografía

Iconografía

Representaciones gráficas de acciones, entidades o conceptos

  • Chevron-Right
  • Chevron-Left
  • Chevron-Bottom
  • Chevron-Top
  • Chevron-Double-Right
  • Chevron-Double-Left
  • Chevron-Double-Bottom
  • Chevron-Double-Top
  • Arrow-Left
  • Arrow-Right
  • Arrow-Bottom
  • Arrow-Top
  • Calendar
  • Edit
  • Envelope
  • Search
  • Arroba
  • Location
  • External-Link
  • Clock
  • Sort-Top
  • Sort-Bottom
  • Sort-Left
  • Sort-Double
  • Minus
  • Plus
  • Eye-Show
  • Eye-Hide
  • Close
  • Trash
  • RRSS-Facebook
  • RRSS-Twitter
  • Login
  • Upload
  • Download
  • Logout
  • Phone
  • Copy
  • Burger-Menu
  • User
  • Users
  • Filter
  • Tick
  • Vertical-Menu
  • Status-Warning
  • Status-Info
  • Status-Error
  • Status-Success
  • File
  • Doc-Excel
  • Doc-Word
  • Doc-Pdf

Estilo

Se utilizan iconos de masa de color para dotarlos de más presencia y que en combinaciones con poco contraste sigan manteniendo su legibilidad.

Ejemplo visual de un icono y su área

Grid y margen

Contaremos con un padding de 2 pixeles para los iconos de 20 y 24 px. Para los iconos de 16 px contaremos con un padding de 1 pixel.

Ejemplo visual de los espacios de un icono
Ejemplo visual de los espacios de un icono
Ejemplo visual de los espacios de un icono
Ejemplo visual de los espacios de un icono
Ejemplo visual de los espacios de un icono

Tamaños

${row.exampleAlt} 100 jcr:4d6644c7-dc8c-40b3-ac0a-e69b1048a8b0 Contenedor: 16px, Área visible: 14px, Padding: 1px Button S, BackLink, Estado Input, Tag S 200 jcr:96a48589-1c6c-4e7a-9a2d-b41534ba4b76 Contenedor: 20px, Área visible: 18px, Padding: 2px Button M, cierre Modales, chevrons, Tag M, BackTop, Checkbox, Input icon 300 jcr:b8722a62-0ff0-4e9a-aa14-c2904028fe6b Contenedor: 24px, Área visible: 22px, Padding: 2px Button L, Links RRSS, flechas navegación carrusel

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

 Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web