Image Resources Blog Post

Author: jjlong150

docs/blog/posts/icons.md

@@ -0,0 +1,169 @@
+---
+blogPost: true
+title: Enrich Your Graphviz Diagrams with High-Quality Images
+description: A curated list of excellent free icon sources to make your Graphviz diagrams more expressive and professional.
+date: 2026-05-02
+author: jjlong150
+tags: ['styling','icons','images','resources']
+published: true
+readingTime: true
+sidebar: false
+---
+
+Images can instantly elevate a Graphviz diagram. A small, well‑chosen icon communicates meaning faster than text alone and adds visual polish without cluttering the layout.
+
+[Image support](/designer/#images) in the Relationship Visualizer Style Designer makes it easy to define reusable styles that incorporate images cleanly and consistently. In practice, the hardest part is often just finding good image files to use.
+
+Below is a curated list of high‑quality, **free** icon sources that work beautifully in Graphviz.
+
+::: tip Tip: Keep images small
+Graphviz produces cleaner layouts when it has space to route edges. Oversized images can restrict the engine, while small SVGs stay crisp at any scale and preserve layout flexibility.
+:::
+
+## Quick Comparison
+
+Use this quick comparison table to jump directly to the icon category you need and explore the full details in each section.
+
+| Category                     | Best For                               | Approx. Icons     | Standout Strength                     |
+|------------------------------|------------------------------------------|--------------------|----------------------------------------|
+| [General Purpose](#general-purpose-icon-libraries) | Clean, everyday diagrams                 | 300 – 5,000+       | Simplicity & consistency               |
+| [Unified Collections](#unified-massive-collections) | Maximum variety                          | 200,000+           | One‑stop access                        |
+| [Cloud & Enterprise](#cloud-enterprise) | AWS, Azure, Google, and Microsoft  | Hundreds           | Official branding & accuracy           |
+| [Networking & Infrastructure](#networking-infrastructure) | Network and topology diagrams            | Hundreds           | Industry‑standard symbols              |
+| [CRM & Business Platforms](#crm-business-platforms) | Salesforce ecosystem diagrams            | Hundreds           | Deep platform alignment                |
+| [Brand & Technology Logos](#brand-technology-logos) | Technology & company references          | 1,000+             | Recognizable product logos             |
+| [Security & Compliance](#security-compliance) | Security architecture & threat modeling  | Hundreds           | Specialized security concepts          |
+| [Healthcare & Medical](#healthcare-medical) | Clinical, health, and medical diagrams   | Hundreds           | Purpose‑built medical symbols          |
+| [Government, Maps & Standards](#government-maps-standards) | Maps, civic, signage, geospatial work    | 100 – 500+         | Clear, standardized visual language    |
+| [Emojis](#bonus-emojis)      | Quick prototypes & expressive diagrams   | Thousands (OS‑dependent) | Built‑in, lightweight visuals     |
+
+
+## General-Purpose Icon Libraries
+
+These libraries offer broad, versatile icon sets that work well for most diagrams and everyday Graphviz use.
+
+- [**Feather Icons**](https://feathericons.com/)  
+Minimalist open-source set with ~300 clean, lightweight SVGs. Excellent for a simple and elegant look.
+
+- [**Lucide Icons**](https://lucide.dev/)  
+Beautiful community-driven fork of Feather with 1,600+ consistent icons. Modern and highly customizable.
+
+- [**Heroicons**](https://heroicons.com/)  
+Hand-crafted by the Tailwind CSS team in Outline and Solid styles. Perfect for clean, modern diagrams.
+
+- [**Phosphor Icons**](https://phosphoricons.com/)  
+Versatile library with over 1,000 icons in 6 weights (Thin to Fill). Extremely flexible.
+
+- [**Tabler Icons**](https://tabler.io/icons)  
+Massive collection of 5,000+ high-quality, consistent SVGs with outline and filled variants.
+
+## Unified & Massive Collections
+
+These collections bring together huge numbers of icons from many different sources, giving you maximum variety in a single place.
+
+- [**Iconify**](https://iconify.design/)  
+The ultimate one-stop framework with **over 200,000** open-source icons from 200+ popular sets (Material, Font Awesome, Feather, and many more).
+
+- [**Google Material Icons / Symbols**](https://fonts.google.com/icons)  
+Google’s official library with 2,500+ clean, modern icons. Includes customizable variable symbols (outlined, rounded, sharp).
+
+## Cloud & Enterprise
+
+These official vendor icon sets are ideal for cloud architecture diagrams where accuracy and product‑specific visuals matter.
+
+- [**AWS architecture icons**](https://aws.amazon.com/architecture/icons/)  
+Official AWS icons representing services and resources. Essential for accurate cloud architecture diagrams.
+
+- [**Google Cloud product icons**](https://cloud.google.com/icons)  
+Google’s official architecture diagram icons.
+
+- [**Kubernetes Icons Set**](https://github.com/kubernetes/community/tree/master/icons/)  
+Official Kubernetes pictograms for workloads, controllers, and cluster components.
+
+- [**Microsoft Azure Architecture icons**](https://learn.microsoft.com/en-us/azure/architecture/icons/)  
+Official Azure product icons. Great for consistent Microsoft cloud visuals.
+
+- [**Microsoft Cloud Product Logos**](https://www.mscloudlogos.com/)  
+This collection of logos has been built up over the years using both official Microsoft logo packages, as well as hard-to-find places.
+
+- [**Microsoft Dynamics 365 icons**](https://learn.microsoft.com/en-us/dynamics365/get-started/icons)  
+Official icons for Dynamics 365 and related business applications.
+
+- [**Microsoft Power Platform icons**](https://learn.microsoft.com/en-us/power-platform/guidance/icons)  
+Official icons for Power Apps, Power Automate, Power BI, Dataverse, and more.
+
+## Networking & Infrastructure
+
+These icon sets provide standardized symbols for network topologies, making it easy to create clear and recognizable infrastructure diagrams.
+
+- [**Cisco Network Topology Icons**](https://www.cisco.com/c/en/us/about/brand-center/network-topology-icons.html)  
+Globally recognized standard for network diagrams. Includes routers, switches, firewalls, and more.
+
+## CRM & Business Platforms
+
+These collections offer polished, platform‑specific icons designed for business applications and customer‑focused workflows.
+
+- [**Salesforce Lightning Design System (SLDS) Icons**](https://www.lightningdesignsystem.com/icons)  
+Official polished icons tailored for the Salesforce ecosystem.
+
+- [**Salesforce Icons (Community)**](https://www.salesforceicons.com/)  
+Community-curated collection with easy copy-paste SVGs and broader selection.
+
+## Brand & Technology Logos
+
+These libraries provide clean, consistent brand and technology logos for diagrams that reference specific tools, services, or companies.
+
+- [**Simple Icons**](https://simpleicons.org/)  
+Huge standardized collection of brand and technology logos. Ideal when you need instantly recognizable icons.
+
+## Security & Compliance
+
+These icon sets focus on security concepts, risks, and architecture components commonly used in threat modeling and compliance diagrams.
+
+- [**OWASP Icons (Community)**](https://github.com/OWASP/mastg/tree/master/Document/Images/)  
+Community‑maintained symbols for vulnerabilities, risks, and security concepts. Helpful for threat modeling and security documentation.
+
+## Healthcare & Medical
+
+These collections offer purpose‑built medical and clinical symbols suitable for healthcare, research, and public‑health diagrams.
+
+- [**Health Icons**](https://healthicons.org/)  
+A nonprofit, open‑source collection of medical and global‑health symbols. Ideal for healthcare, clinical, and research diagrams.
+
+- [**Material Design Medical Icons**](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.query=medical)  
+Google’s Material Symbols include a full medical category (labs, vitals, devices).
+
+## Government, Maps & Standards
+
+These sets include standardized signage, civic symbols, and map‑focused icons designed for geospatial and public‑sector diagrams.
+
+- [**The Noun Project**](https://thenounproject.com/icons/)  
+A massive library with many public‑domain and Creative Commons icons, including civic, signage, and map‑related symbols.
+
+- [**Mapbox Maki Icons**](https://labs.mapbox.com/maki-icons/)  
+Clean, minimalist icons designed for maps and geospatial diagrams, including POIs, transportation, and landmarks.
+
+## Bonus: Emojis
+
+Emojis are built‑in, lightweight, and great for quick prototypes. However, the same emoji can look noticeably different across operating systems.
+
+::: warning Windows and macOS require different emoji fonts
+
+Emoji fonts are operating‑system specific, which means your diagram’s appearance can change depending on where it’s viewed. Always test emoji‑based diagrams on the target platforms to avoid surprises.
+
+| Platform | Font Name          |
+|----------|--------------------|
+| Windows  | Segoe UI Emoji     |
+| macOS    | Apple Color Emoji  |
+
+:::
+
+- [**OpenMoji**](https://openmoji.org/)  
+A consistent, open‑source emoji set available as SVGs — perfect when you want emoji‑style visuals without OS‑specific font differences.
+
+
+## What Are *Your* Favorite Icon Sources?
+
+I’ve highlighted many of the best free resources, but the icon ecosystem keeps expanding and everyone has their own trusted go‑to sets. What **free** icon collections do you rely on when building your Graphviz diagrams?
+
+Share your favorites in the comments and help the community discover new gems.