Skip to content

IT Icons Gallery

View IT Icons Gallery Fullscreen

This MicroSim displays all IT device and management icons used throughout the course, organized by category for easy browsing and reference.

Features

Icon Categories

The gallery organizes 47 SVG icons into 11 categories:

  • Computers & Workstations - Desktops, laptops, monitors, tablets, phones, smartwatches
  • Servers & Infrastructure - Servers, hard drives, storage arrays, SSDs
  • Databases - Database icons with various states (add, check, gear)
  • Peripherals - Printers, mice, keyboards, headsets, webcams
  • Network Devices - Routers, WiFi, ethernet
  • Cloud & Virtual - Cloud storage and transfer icons
  • Users & Access - User and workstation icons
  • Security - Locks, keys, security shields
  • Monitoring & Performance - Activity, metrics, processors, memory
  • Locations - Office buildings, homes, location pins
  • Operating Systems - Mac and Linux logos

Interactive Features

  • Click to Copy - Click any icon card to copy the filename to clipboard
  • Visual Feedback - Cards flash green when filename is copied
  • Hover Effects - Cards lift and highlight on hover for better interactivity
  • Responsive Grid - Automatically adjusts layout based on screen size

Icon Details

  • Format: SVG (Scalable Vector Graphics)
  • Style: Clean, monochrome line icons
  • License: MIT License (Bootstrap Icons)
  • Usage: Free for commercial use, no attribution required

Data Source

Icons are stored in the IT Icons directory See /docs/it-icons/index.html. These are selected MIT Licensed Bootstrap Icons.

Usage Tips

  1. Browse by category - Scroll through organized sections to find the right icon type
  2. Copy filenames - Click any icon to copy its filename for use in documentation
  3. Visual reference - Use this gallery to see all available icons at a glance
  4. Icon selection - Choose appropriate icons for diagrams, documentation, or presentations

Implementation Notes

This viewer uses vanilla HTML and JavaScript (no frameworks):

  • Pure CSS Grid for responsive layout
  • JavaScript DOM manipulation for dynamic rendering
  • Clipboard API for copy-to-clipboard functionality
  • Relative paths to icon files (../../it-icons/)
  • Error handling for missing icons with placeholder display

Use Cases

  • Documentation - Select appropriate icons for technical documentation
  • Diagrams - Choose icons for architecture diagrams and network topologies
  • Presentations - Find icons for slides and visual aids
  • CMDB/Graph modeling - Visual reference for IT asset types in configuration management
  • Learning materials - Consistent iconography for educational content