Surface icons
Choose consistent icons from a catalog shared with AI.
Choose in the Model
The Surface icon picker searches icons by name and associates them with Model elements supporting an icon. Users and AI share the same catalog: AI proposals use the same identifiers and can be changed in the same picker.
| Element | Suggested example icon | Intent |
|---|---|---|
| Clients | users | People or clients |
| Quotes | file-text | Written proposal |
| Settings | settings | Configuration |
| Relations | link | Associated object |
| Prepare | workflow | Multi-step work |
Meaning and accessibility
Choose icons by meaning and retain understandable labels. Icon-only controls need accessible names. Color must not be the sole distinction between an available and refused action.
Exact reference
Icon declarations use the presentation contract. Choose a name from the Surface catalog; Model tools manage the catalog’s technical parameters. AI must use an available name from the same catalog.
Find the shape in the Model picker, check its preview and label, then apply your choice. Surface uses the catalog associated with the Model.
Surface icon catalog
Search by name or French or English keywords, then filter by category: navigation, people, communication, files, finance, tools, transportation and other domains. Select an icon to copy its name. Show more displays the next items in the selection.
This gallery presents the same icons as the Surface catalog used by the Model and AI. Copying a name does not modify your app; apply your choice in the Model picker.
The Surface icon catalog in JSON format exposes names, categories, keywords and previews for tools and AI.
Applied examples : Consistent icons for your objects
Use users for Clients and file-text for Quotes; the picker and AI share these names.
Configuration
Fragment placed in icon.name. Properties and accepted values.
"users"Variation and connection
Fragment placed in icon.name. Properties and accepted values.
"file-text"UI layout example
The illustrative layout below places this configuration in the Clients/Quotes app. Insert each fragment at the stated location, with Field, Query and Action references matching the Model declarations.
- Clients
- Quotes
- Settings
- Relations