Editorial icons

Editorial icons are custom illustrations that support a consistent and recognizable brand presence while supporting visual storytelling. They represent concepts and themes in expressive ways, helping users quickly scan, understand, and engage with content.

Editorial icon specifications

Follow these guidelines to ensure editorial icons maintain a consistent, brand-aligned visual style:

• Artboard size: 1024 × 1024 pixels
• Corner radius: 64 pixels
• Stroke weight: 32 points
• Color palette: TxDOT primary blue, light gray, and white (see details below)
• Color mode: RGB for digital use; CMYK for print
• Typography: Use brand font IBM Plex Sans; limit text to symbols or single characters (e.g., $)
• Grid system: Use a 32 by 32 visual grid for visual alignment consistency
• Alignment: Snap shapes and strokes to the grid

Production prep for web use

To prepare editorial icons for web use, follow these steps:

• Check the Digital Asset Management (DAM) system before uploading to see if the icon already exists
  
• Convert strokes to shapes to ensure consistent rendering
• Merge same-color graphics into single paths for reduced file size (example below)
• Name shape path/layers by color for CSS styling:
  • Name blue shape path "icon-color-1"
  • Name light gray shape path "icon-color-2"
  • Name white shape path "icon-color-3"
  • SVG code for each color shape or path should include the above layer name as an ID (e.g., <path id="icon-color-1">)

Icon colors