Documentation >
Templating >
Twig function reference >
Icon Twig functions

Icon Twig functions¶

`ibexa_icon_path()`¶

ibexa_icon_path() generates a path to the selected icon from an icon set.

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.

<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--light">
    <use xlink:href="{{ ibexa_icon_path('edit', 'my_icons') }}"></use>
</svg>

The icons can be displayed in different colors and sizes.

Icon color variants¶

By default, the icon inherits the 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

<svg class="ibexa-icon ibexa-icon--dark">
    <use xlink:href="{{ ibexa_icon_path('edit') }}"></use>
</svg>

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.

<svg class="ibexa-icon ibexa-icon--medium">
  <use xlink:href="{{ ibexa_icon_path('add') }}"></use>
</svg>

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`