# Icon Twig functions
## `ibexa_icon_path()`
`ibexa_icon_path()` generates a path to the selected icon from an [icon set](https://doc.ibexa.co/en/latest/administration/back_office/back_office_elements/custom_icons/#icon-sets).
| Argument | Type | Description |
| -------- | -------- | ------------------------------------------------------------------------------ |
| `icon` | `string` | Identifier of an icon in the icon set. |
| `set` | `string` | Identifier of the configured icon set. If empty, the default icon set is used. |
```
```
The icons can be displayed in different colors and sizes.
### Icon color variants
By default, the icon inherits the [`fill`](https://developer.mozilla.org/en-US/docs/Web/CSS/fill) attribute from the parent element. You can change it by using one of the available CSS modifiers:
| Modifier | Usage |
| ------------- | -------------------------------------- |
| `--light` | To be used on dark backgrounds |
| `--dark` | To be used on light backgrounds |
| `--base-dark` | To be used on light backgrounds |
| `--primary` | To use the primary back office color |
| `--secondary` | To use the secondary back office color |
```
```
### Icon size variants
The default icon size in the back office is `32px`. To change the default size, in the template add the modifier to the class name.
```
```
The list of available icon sizes:
| Modifier | Size |
| ---------------- | ------ |
| `--tiny` | `8px` |
| `--tiny-small` | `12px` |
| `--small` | `16px` |
| `--small-medium` | `20px` |
| `--medium` | `24px` |
| `--medium-large` | `38px` |
| `--large` | `48px` |
| `--extra-large` | `64px` |
### Icons reference
The following icons are available out-of-the-box:
| Icon | Identifier |
| ---- | ------------------------------ |
| | `accessibility` |
| | `action-compare` |
| | `action-compare-versions` |
| | `action-redo` |
| | `action-undo` |
| | `activate` |
| | `activity-clock` |
| | `add` |
| | `add-circle` |
| | `ai` |
| | `alert-error` |
| | `alert-warning` |
| | `align-block-center` |
| | `align-block-left` |
| | `align-block-right` |
| | `align-text-center` |
| | `align-text-justified` |
| | `align-text-left` |
| | `align-text-right` |
| | `app` |
| | `app-blog` |
| | `app-drawer` |
| | `app-edit` |
| | `app-money` |
| | `app-preview` |
| | `app-recent` |
| | `app-settings` |
| | `app-user` |
| | `app-www` |
| | `archived-restore` |
| | `archived-version` |
| | `arrow-caret-down` |
| | `arrow-caret-left` |
| | `arrow-caret-right` |
| | `arrow-caret-up` |
| | `arrow-chevron-down` |
| | `arrow-chevron-left` |
| | `arrow-chevron-right` |
| | `arrow-chevron-up` |
| | `arrow-collapse-expand` |
| | `arrow-collapse-left` |
| | `arrow-collapse-right` |
| | `arrow-decrease` |
| | `arrow-double-left` |
| | `arrow-double-right` |
| | `arrow-down` |
| | `arrow-down-text` |
| | `arrow-expand-left` |
| | `arrow-expand-right` |
| | `arrow-increase` |
| | `arrow-left` |
| | `arrow-move-left` |
| | `arrow-move-right` |
| | `arrow-reload-dot` |
| | `arrow-restore` |
| | `arrow-right` |
| | `arrow-rotate` |
| | `arrow-to-down` |
| | `arrow-to-down-circle` |
| | `arrow-to-left` |
| | `arrow-to-right` |
| | `arrow-to-up` |
| | `arrow-up` |
| | `arrow-up-text` |
| | `arrow-upgrade` |
| | `arrows-chevron-up-and-down` |
| | `arrows-circle` |
| | `arrows-full-view` |
| | `arrows-full-view-out` |
| | `arrows-inside` |
| | `arrows-outside` |
| | `arrows-recycle` |
| | `arrows-reload` |
| | `arrows-reload-user` |
| | `arrows-right-and-left` |
| | `arrows-round` |
| | `arrows-switch` |
| | `arrows-synchronize` |
| | `arrows-up-and-down` |
| | `assign` |
| | `assign-tag` |
| | `assign-user` |
| | `automation` |
| | `badge-certificate-horizontal` |
| | `badge-certificate-vertical` |
| | `badge-star` |
| | `banner` |
| | `bell` |
| | `block-add` |
| | `block-hidden` |
| | `block-lock` |
| | `block-visible` |
| | `book` |
| | `book-open` |
| | `bookmark-filled` |
| | `bookmark-outline` |
| | `bookmarks` |
| | `box-component` |
| | `bulb-idea` |
| | `business-card` |
| | `calculator` |
| | `calendar` |
| | `calendar-add` |
| | `calendar-back` |
| | `calendar-block` |
| | `calendar-check` |
| | `calendar-clock` |
| | `calendar-discard` |
| | `calendar-hidden` |
| | `calendar-number` |
| | `calendar-reload` |
| | `calendar-schedule` |
| | `calendar-visible` |
| | `camera` |
| | `car` |
| | `car-truck` |
| | `catalog` |
| | `chart-area` |
| | `chart-area-line` |
| | `chart-bar` |
| | `chart-donut` |
| | `chart-donut-element` |
| | `chart-dots` |
| | `chart-dots-other` |
| | `chart-gauges` |
| | `chart-histogram` |
| | `chart-line` |
| | `chart-line-graph` |
| | `check-circle` |
| | `chevron-down-circle` |
| | `chevron-left-circle` |
| | `chevron-right-circle` |
| | `chevron-up-circle` |
| | `clipboard-check` |
| | `clipboard-list` |
| | `clock` |
| | `clock-play` |
| | `cloud` |
| | `cloud-carbon` |
| | `cloud-check` |
| | `cloud-discard` |
| | `cloud-download` |
| | `cloud-error` |
| | `cloud-synch` |
| | `collaboration` |
| | `collection` |
| | `collection-products` |
| | `column-one` |
| | `column-two` |
| | `company` |
| | `connection` |
| | `connection-erp` |
| | `content-tree` |
| | `content-tree-arrow-up` |
| | `content-tree-copy` |
| | `content-tree-create-location` |
| | `content-tree-restore-parent` |
| | `content-tree-site-structure` |
| | `copy` |
| | `copyright` |
| | `core` |
| | `credit-card` |
| | `credit-card-hourglass` |
| | `credit-card-payment` |
| | `crop` |
| | `cursor` |
| | `cursor-clicked` |
| | `cursor-clicked-hand` |
| | `cursor-hand` |
| | `cursor-hand-click` |
| | `cursor-hand-grab` |
| | `cursor-hand-pointer` |
| | `cursor-hand-swipe` |
| | `dashboard` |
| | `dashboard-type` |
| | `database` |
| | `database-settings` |
| | `database-share` |
| | `database-synch` |
| | `deactivate` |
| | `device-desktop-all-in-one` |
| | `device-laptop` |
| | `device-mobile` |
| | `device-monitor` |
| | `device-monitor-card` |
| | `device-monitor-check` |
| | `device-monitor-package` |
| | `device-monitor-settings` |
| | `device-monitor-type` |
| | `device-monitor-user` |
| | `device-tablet` |
| | `discard` |
| | `discard-circle` |
| | `discount` |
| | `discount-ticket` |
| | `download` |
| | `draft` |
| | `drag` |
| | `drag-and-drop` |
| | `duplicate` |
| | `edit` |
| | `edit-draft` |
| | `edit-draft-clock` |
| | `exclamation-mark` |
| | `facebook` |
| | `factbox` |
| | `favourite-filled` |
| | `favourite-outline` |
| | `feather` |
| | `file` |
| | `file-add` |
| | `file-arrow-up` |
| | `file-badge-certificate` |
| | `file-code` |
| | `file-copyright` |
| | `file-css` |
| | `file-edit` |
| | `file-history` |
| | `file-info` |
| | `file-js` |
| | `file-link` |
| | `file-pdf` |
| | `file-php` |
| | `file-settings` |
| | `file-statistics` |
| | `file-text` |
| | `file-text-edit` |
| | `file-text-money` |
| | `file-text-other` |
| | `file-text-question-mark` |
| | `file-text-search` |
| | `file-text-write` |
| | `file-type` |
| | `file-warning` |
| | `filters` |
| | `filters-funnel` |
| | `flag` |
| | `flip-horizontal` |
| | `flip-vertical` |
| | `focus-centered` |
| | `focus-target` |
| | `folder` |
| | `folder-browse` |
| | `folder-open` |
| | `folder-open-move` |
| | `folders` |
| | `forbidden` |
| | `form-captcha` |
| | `form-check` |
| | `form-check-list` |
| | `form-check-square` |
| | `form-checkbox` |
| | `form-data` |
| | `form-dropdown` |
| | `form-input` |
| | `form-input-check` |
| | `form-input-hidden` |
| | `form-input-multi-line` |
| | `form-input-number` |
| | `form-input-rename` |
| | `form-input-single-line` |
| | `form-input-visible` |
| | `form-radio` |
| | `form-radio-list` |
| | `handshake` |
| | `hash` |
| | `header-1` |
| | `header-2` |
| | `header-3` |
| | `header-4` |
| | `header-5` |
| | `header-6` |
| | `headphones-support` |
| | `heart` |
| | `help` |
| | `hierarchy-circle` |
| | `hierarchy-circle-more` |
| | `hierarchy-items` |
| | `hierarchy-schema` |
| | `hierarchy-site-map` |
| | `hierarchy-square` |
| | `hierarchy-square-more` |
| | `hierarchy-topology` |
| | `history` |
| | `home` |
| | `home-settings` |
| | `image` |
| | `image-edit` |
| | `image-focus` |
| | `image-gallery` |
| | `image-insert` |
| | `image-upload` |
| | `info-circle` |
| | `info-rounded` |
| | `info-square` |
| | `layout` |
| | `layout-navbar` |
| | `layout-navbar-add` |
| | `layout-navbar-preview` |
| | `layout-navbar-visible` |
| | `layout-switch` |
| | `lift` |
| | `lightning` |
| | `like` |
| | `like-shine` |
| | `line-vertical` |
| | `link` |
| | `link-anchor` |
| | `list-bullet` |
| | `list-content` |
| | `list-number` |
| | `list-tasks` |
| | `lock` |
| | `lock-focus` |
| | `lock-rounded` |
| | `log-in` |
| | `log-out` |
| | `magnet` |
| | `measure-ruler-bent` |
| | `measure-ruler-straight` |
| | `media-type` |
| | `menu-hamburger` |
| | `menu-hamburger-aligned` |
| | `merge` |
| | `message` |
| | `message-blog-post` |
| | `message-bubble` |
| | `message-bubble-dots` |
| | `message-bubble-edit` |
| | `message-bubble-info` |
| | `message-bubble-quote` |
| | `message-edit` |
| | `message-email` |
| | `message-email-read` |
| | `message-empty` |
| | `message-exchange` |
| | `message-text` |
| | `microphone` |
| | `minus` |
| | `minus-circle` |
| | `money-bag` |
| | `money-bills` |
| | `money-coin` |
| | `money-coins` |
| | `mood-happy-face` |
| | `mood-sad-face` |
| | `more` |
| | `mountain` |
| | `news` |
| | `note` |
| | `note-blog` |
| | `note-check` |
| | `note-text` |
| | `notebook` |
| | `notebook-text` |
| | `notes-list` |
| | `official-building` |
| | `open-new-window` |
| | `open-same-window` |
| | `overdue` |
| | `path-route` |
| | `path-two-directions` |
| | `pause` |
| | `pen-write` |
| | `phone` |
| | `pin` |
| | `pin-location` |
| | `pin-location-money` |
| | `pin-location-question-mark` |
| | `pins-locations` |
| | `plane` |
| | `price` |
| | `product` |
| | `product-arrow-down` |
| | `product-catalog` |
| | `product-catalog-number` |
| | `product-check` |
| | `product-clock` |
| | `product-collection` |
| | `product-discard` |
| | `product-search` |
| | `product-settings` |
| | `product-tag` |
| | `product-variant` |
| | `prompt` |
| | `qa-admin` |
| | `qa-catalog` |
| | `qa-click` |
| | `qa-clipboard` |
| | `qa-cloud` |
| | `qa-company` |
| | `qa-editor` |
| | `qa-file` |
| | `qa-form-check` |
| | `qa-info` |
| | `qa-product` |
| | `qa-store` |
| | `quote` |
| | `receipt` |
| | `receipt-check` |
| | `receipt-clock` |
| | `receipt-number` |
| | `receipt-settings` |
| | `reveal` |
| | `robot` |
| | `rocket` |
| | `sales-revenue` |
| | `save` |
| | `save-exit` |
| | `search` |
| | `seen-this` |
| | `segments` |
| | `send` |
| | `send-review` |
| | `server` |
| | `settings` |
| | `settings-cog` |
| | `settings-configure` |
| | `share` |
| | `shield` |
| | `shipment` |
| | `shipment-arrow` |
| | `shipment-free` |
| | `shop` |
| | `shopping-basket` |
| | `shopping-cart` |
| | `shopping-cart-add` |
| | `shopping-cart-arrow-up` |
| | `shopping-cart-heart` |
| | `shopping-cart-settings` |
| | `shopping-cart-star` |
| | `signal-radio` |
| | `signal-rss` |
| | `signal-wifi` |
| | `site` |
| | `sites` |
| | `slider` |
| | `speaker` |
| | `square` |
| | `square-selection` |
| | `stack-overflow` |
| | `star-badge` |
| | `star-circle` |
| | `stars` |
| | `suitcase` |
| | `table-add` |
| | `table-cell` |
| | `table-column` |
| | `table-row` |
| | `table-settings-column` |
| | `tag` |
| | `tag-settings` |
| | `tags` |
| | `target` |
| | `target-click` |
| | `target-dynamic` |
| | `target-location` |
| | `target-other` |
| | `telephone` |
| | `text-bold` |
| | `text-code` |
| | `text-embedded` |
| | `text-embedded-inline` |
| | `text-italic` |
| | `text-paragraph` |
| | `text-paragraph-add` |
| | `text-slash` |
| | `text-strikethrough` |
| | `text-subscript` |
| | `text-superscript` |
| | `text-underline` |
| | `timeline` |
| | `tool` |
| | `tool-group` |
| | `tools` |
| | `translation-language` |
| | `trash` |
| | `trash-discard` |
| | `trash-open` |
| | `trash-send` |
| | `twitter` |
| | `umbrella` |
| | `unarchive` |
| | `unassign-tag` |
| | `unlink` |
| | `unlock` |
| | `unpin` |
| | `upload` |
| | `user` |
| | `user-add` |
| | `user-admin` |
| | `user-block` |
| | `user-cart` |
| | `user-check` |
| | `user-customer` |
| | `user-customer-number` |
| | `user-edit` |
| | `user-editor` |
| | `user-focus` |
| | `user-group` |
| | `user-group-customer` |
| | `user-id` |
| | `user-mail` |
| | `user-money` |
| | `user-profile` |
| | `user-target` |
| | `user-type` |
| | `users-add` |
| | `variation-1-1` |
| | `variation-16-9` |
| | `variation-3-2` |
| | `variation-4-3` |
| | `variation-custom` |
| | `video` |
| | `video-play` |
| | `view-custom` |
| | `view-grid` |
| | `view-list` |
| | `view-panels` |
| | `vinyl` |
| | `visibility` |
| | `visibility-hidden` |
| | `wand` |
| | `workflow` |
| | `world` |
| | `world-add` |
| | `world-cursor` |
| | `world-settings` |
| | `x` |
| | `zoom-in` |
| | `zoom-out` |
## `ibexa_content_type_icon()`
`ibexa_content_type_icon()` generates a path to a content type icon.
| Argument | Type | Description |
| -------------- | -------- | ------------------------ |
| `content_type` | `string` | Content type identifier. |
See [Customize content type icons](https://doc.ibexa.co/en/latest/administration/back_office/back_office_elements/custom_icons/#customize-content-type-icons) to associate icons to content types.