Building block icons
🔲 Building block icons are used to quickly identify IndieWeb building blocks practices, features, and standards.
There are proposals to create a unified set of icons to represent IndieWeb concepts, formats, and protocols that are common building blocks.
Use cases
Building block icons can be used to perform a number of functions, depending on context:
- Personal site owners can use icons to show support for IndieWeb formats (like: “I have a valid h-card” or “I support rel-me”)
- Creators of third party tools & projects can use icons to show support for building block standards like microformats2, Micropub, Webmention, etc.
- Website user interfaces can use icons to provide information or context; for example to identify the origin of a comment being from a webmention, or ways to follow/subscribe such as h-feed, RSS, JSON Feed
- Documentation, diagrams, and tutorials can use icons to identify formats and protocols used within workflows and user journeys
Design goals
When creating icons to represent IndieWeb building blocks, its important that they:
- have a relationship to an identity used for the wider movement
- share a common design language
- are unique, and don’t look like icons for other social web projects
- are simple, clear and can be used at multiple sizes
Icons for IndieWeb concepts
At a session at IndieWebCamp Nuremberg 2023, it was felt that all building blocks should be represented by icons to prevent the impression that you can only be part of the IndieWeb if you use certain protocols or formats.
2023 proposal
The recommended colour for concept icons is #FFB100 (see Indieweb color palette).
Icons for Microformats
Icons in current usage
Microformats has an established logo and branding, but currently no icons to represent the individual formats.
2023 proposal
The recommended colour for Microformat icons is #A3CC00.
Icons for IndieWeb protocols
IndieAuth
Icons in current usage
-
Icon used on indieauth.com
-
‘Origami’ icon
2023 proposal
The recommended colour for IndieAuth (and related) icons is #CC0081 (taken from https://indieauth.rocks).
Micropub
Icons in current usage
-
‘Origami’ icon
2023 proposal
The recommended colour for Micropub (and any related icons) is #13B919 (taken from https://micropub.rocks).
Microsub
Icons in current usage
-
‘Origami’ icon
2023 proposal
The recommended colour for Microsub (and any related icons) is #00CCB1.
Webmention
Icons in current usage
-
Icon used webmention.io
-
Origami icon
2023 proposal
The recommended colour for Webmention and related icons is #FF5C00 (taken from https://webmention.rocks, and using primary orange from the Indieweb color palette).
Websub
Icons in current usage
-
Origami icon
2023 proposal
The recommended colour for WebSub (and any related icons) is #6D00CC (taken from https://websub.rocks).
Feedback on 2023 proposals
Feedback on the 2023 proposals are being collected here. Please add or link to your feedback below.
I like this a lot. Enjoy IndieWebCamp!
Your proposal really honors the homegrown aspect of the current IndieWeb visual identity, including the existing language of each protocol. Each works great as a standalone icon, and together make a nice looking system.
– Nick Simson, October 2023
Examples of usage
Manton Reece is using the proposed icons on a page that explains Micro.blog’s support for different IndieWeb specs and building blocks: https://micro.blog/about/indieweb