Editorial iconos
Skip to main content
Careers Contact us

Editorial iconos

Identidad visual

Icono azul y blanco de coche y bicicleta en la carretera con nube y avión
Señales sobre icono de ordenador
Icono de camión en la carretera con flechas apuntando a la izquierda y a la derecha
Icono del casco sobre el escudo

Los iconos editoriales son ilustraciones personalizadas que mantienen una presencia de marca coherente y reconocible, a la vez que respaldan la narrativa visual. Representan conceptos y temas de forma expresiva, ayudando a los usuarios a escanear, comprender e interactuar rápidamente con el contenido.

Accede a iconos editoriales

  • Los iconos editoriales se precargan en TxDOT.gov y en el repositorio digital de archivos de la intranet, simplemente busca "icono".
  • Los proveedores deben solicitar los archivos a su punto de contacto en TxDOT.
  • Si necesitas un icono editorial personalizado, envía una solicitud al equipo de Marca y Diseño de Servicios Creativos. 

Especificaciones de iconos editoriales

Sigue estas pautas para asegurarte de que los iconos editoriales mantengan un estilo visual coherente y alineado con la marca:

  • Tamaño del tablero de trabajo: 1024 1024 píxeles
  • Radio de esquina: 64 píxeles
  • Peso del golpe: 32 puntos
  • Paleta de colores: Azul primario, gris claro y blanco de TxDOT (ver detalles más abajo)
  • Modo de color: RGB para uso digital; CMYK para impresión
  • Tipografía: Usar fuente de marca IBM Plex Sans; limitar el texto a símbolos o caracteres individuales (por ejemplo, $)
  • Sistema de cuadrícula: Utiliza una cuadrícula visual de 32 por 32 para la coherencia visual
  • Alineación: Ajusta las formas y trazos a la cuadrícula
Icono azul y gris de la pantalla de ordenador con una cuadrícula superpuesta.
Editorial icon template example with 32 by 32 visual grid

Preparación de producción para uso web

Para preparar iconos editoriales para uso web, sigue estos pasos:

  • Revisa el sistema de Gestión de Activos Digitales (DAM) antes de subir la carga para ver si el icono ya existe
  • Convierte los trazos en formas para asegurar un renderizado consistente
  • Fusionar gráficos del mismo color en caminos únicos para reducir el tamaño del archivo (ejemplo abajo)
  • Nombra el camino/capas de forma/capas por color para el estilo CSS:
    • Nombre camino de forma azul "icono-color-1"
    • Nombre gris claro camino de forma "icono-color-2"
    • Nombre camino de forma blanca "icono-color-3"
    • El código SVG para cada color, forma o camino debe incluir el nombre de capa anterior como ID (por ejemplo, <path id="icon-color-1">)
Dibujos lineales de un cronómetro y un círculo con un signo de dólar. Las formas se denominan vivas o no, 'lo que ves es lo que obtienes'.
Editorial icon with live shapes
Dibujos lineales de un cronómetro y un círculo con un signo de dólar. Las formas se denominan 'lo que ves es lo que obtienes'.
Editorial icon with merged shapes

Colores de iconos

Azul primario
HEX: #0056a9
CMYK: 100 / 69 / 0 / 0

Gris claro
HEX: #dadee5
CMYK: 13 / 8 / 5 / 0

Blanco
HEX: #FFFFFF
CMYK: 0 / 0 / 0 / 0

Mejores prácticas de uso de iconos

  • Utiliza iconos editoriales cuando:
    • No hay imágenes disponibles y los iconos de referencia no encajan en el contexto
    • El tema es distintivo o conceptual, como cámaras de tráfico, servidores informáticos u otros tipos de contenido únicos
  • Los iconos editoriales transmiten visualmente ideas complejas de forma sencilla y coherente, reforzando la identidad de marca y mejorando la experiencia global del usuario.
  • Utiliza títulos descriptivos y nombres de archivo que reflejen el contenido del icono, como computer-screen-displaying-data-icon.svg.
  • No uses cuando una imagen comunique mejor el contenido.
  • No uses cuando el contenido sea difícil de ilustrar.
  • No incluyas contexto en los nombres de archivos como 2025-progress-report-innovation-icon.svg