Design system  /  Components  /  Integration icons

Integration icons.

The third surface in the icon family, after partners and clients. Twenty-one monochromatic glyphs covering the Nextcloud-bundled apps, the workflow tools we wire in, the LLM providers we call, and the adjacent Conduction-extension apps. Used inside SidebarMock tabs and WidgetMock headers, plus anywhere copy mentions a third-party tool.

Nextcloud bundled

Surfaces every Nextcloud workspace already ships.

Mail
mail
Calendar
calendar
Files
files
Talk
talk
Decks
decks
RSS
rss
Activity
activity

Workflow & auth

Third-party tools we wire into Conduction apps via OpenConnector.

xWiki
xwiki
n8n
n8n
Windmill
windmill
OpenProject
openproject
Keycloak
keycloak

LLM providers

Models we call from OpenConnector and DocuDesk.

Claude
claude
Mistral
mistral
Ollama
ollama
OpenAI
openai
Gemini
gemini

Conduction extensions

Adjacent apps in the Conduction Nextcloud ecosystem.

OpenTalk
opentalk
Matrix
matrix
Mattermost
mattermost
OpenExchange
openexchange

Where the icons live. Each icon ships in two places: brand/assets/integrations/{category}/{name}.svg for designer reference, and inlined in IntegrationIcon/registry.js as a string for runtime currentColor tinting. Both copies use a 24×24 viewBox; the React component scales down to 12 / 16 / 24 / 40 / 64 via the size prop.

Use from MDX. <IntegrationIcon name="claude" size="md" />. The icon tints to whatever color the parent CSS sets, so a tab label, a heading, or a button can all carry the same SVG and read in the right colour for context.

What these icons are not. Simplified, representational marks in the Conduction visual style. Not replacements for the canonical brand mark of the third-party tool. If you need the real n8n logo on the n8n integration page, fetch their official asset; this set is for layout-mass purposes (tab markers, widget headers, scene composition).