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('create') }}"></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
	`about-info`
	`about`
	`activate`
	`airtime`
	`align-center`
	`align-justify`
	`align-left`
	`align-right`
	`approved`
	`arrow-down`
	`arrow-right`
	`article`
	`assign-section`
	`assign-user`
	`author`
	`autosave-error`
	`autosave-off`
	`autosave-on`
	`autosave-saved`
	`autosave-saving`
	`b2b`
	`back-current-date`
	`back`
	`banner`
	`bell`
	`bestseller`
	`block-add`
	`block-invisible`
	`block-visible-recurring`
	`block-visible`
	`blog_post`
	`blog`
	`bold`
	`bookmark-active`
	`bookmark-manager`
	`bookmark`
	`box-collapse`
	`browse`
	`bubbles`
	`business-deal-cash`
	`button`
	`campaign`
	`captcha`
	`caret-back`
	`caret-double-back`
	`caret-double-next`
	`caret-down`
	`caret-expanded`
	`caret-next`
	`caret-up`
	`cart-full`
	`cart-upload`
	`cart-wishlist`
	`cart`
	`catalog`
	`category`
	`checkbox-multiple`
	`checkbox`
	`checkmark`
	`circle-caret-down`
	`circle-caret-left`
	`circle-caret-right`
	`circle-caret-up`
	`circle-close`
	`circle-create`
	`clicked-recommendations`
	`clipboard`
	`collaboration`
	`collapse`
	`collection`
	`column-one`
	`column-two`
	`comment`
	`components`
	`connect`
	`content-draft`
	`content-tree`
	`content-type-content`
	`content-type-group`
	`content-type`
	`content-write`
	`contentlist`
	`copy-subtree`
	`copy`
	`core`
	`create-content`
	`create-location`
	`create`
	`crop`
	`custom_tags`
	`customer-portal-page`
	`customer-portal`
	`customer-type`
	`customer`
	`dashboard-clean`
	`dashboard-type`
	`dashboard`
	`database`
	`date-updated`
	`date`
	`deactivate`
	`discard`
	`discount-coupon`
	`download`
	`drafts`
	`drag`
	`dropdown`
	`earth-access`
	`edit`
	`embed-inline`
	`embed`
	`erp`
	`error-icon`
	`error`
	`events-collected`
	`expand-left`
	`expand-right`
	`explore`
	`facebook`
	`factbox`
	`fields`
	`file-text`
	`file-video`
	`file`
	`filters-funnel`
	`filters`
	`flag`
	`flash`
	`flip-horizontal`
	`flip-vertical`
	`flip`
	`focus-image`
	`focus`
	`folder-empty`
	`folder`
	`form-data`
	`form`
	`full-view`
	`future-publication`
	`gallery`
	`go-right`
	`go-to-root`
	`go-up`
	`h1`
	`h2`
	`h3`
	`h4`
	`h5`
	`h6`
	`hide`
	`hierarchy`
	`history-file`
	`history`
	`home-page`
	`image-center`
	`image-editor`
	`image-left`
	`image-right`
	`image-variations`
	`image`
	`imported-items`
	`information`
	`input-hidden`
	`input-line-multiple`
	`input-line`
	`input-number`
	`interface-block`
	`italic`
	`keyword`
	`landing_page`
	`landingpage-add`
	`landingpage-preview`
	`languages-add`
	`languages`
	`last-purchased`
	`last-viewed`
	`layout-manager`
	`layout-switch`
	`link-anchor`
	`link-content`
	`link-remove`
	`link`
	`list-numbered`
	`list`
	`localize`
	`location-add-new`
	`lock-unlock`
	`lock`
	`logout`
	`maform`
	`mail-open`
	`mail`
	`markup`
	`media-type`
	`media`
	`menu`
	`merge`
	`move`
	`news`
	`newsletter`
	`notice`
	`object-state`
	`open-newtab`
	`open-sametab`
	`options`
	`order-history`
	`order-management`
	`order-status`
	`panels`
	`paragraph-add`
	`paragraph`
	`pdf-file`
	`personalize-block`
	`personalize-content`
	`personalize`
	`pin-unpin`
	`pin`
	`place`
	`places`
	`portfolio`
	`previewed`
	`previewed`
	`price`
	`product_list`
	`product-catalog`
	`product-category`
	`product-low`
	`product-type`
	`product`
	`profile`
	`publish-hide`
	`publish-later-cancel`
	`publish-later-create`
	`publish-later`
	`publish`
	`qa-catalog`
	`qa-company`
	`qa-content`
	`qa-form`
	`qa-product`
	`quote`
	`radio-button-multiple`
	`radio-button`
	`rate-review`
	`rate`
	`recent-activity`
	`recently-added`
	`recommendation-calls`
	`redo`
	`refresh`
	`rejected`
	`relations`
	`restore-parent`
	`restore`
	`reveal`
	`review`
	`roles`
	`rss`
	`save-exit`
	`save`
	`schedule`
	`search`
	`sections`
	`send-review`
	`server`
	`settings-block`
	`settings-config`
	`share`
	`sites-all`
	`sites`
	`slider`
	`spinner`
	`square`
	`stats`
	`strikethrough`
	`subscriber`
	`subscript`
	`superscript`
	`swap`
	`system-information`
	`table-add`
	`table-cell`
	`table-column`
	`table-row`
	`tag`
	`tags`
	`telephone`
	`timeline`
	`trash-empty`
	`trash-notrashed`
	`trash-send`
	`trash`
	`twitter`
	`un-focus`
	`un-full-view`
	`unarchive`
	`underscore`
	`undo`
	`upload-image`
	`upload`
	`user_group`
	`user-add`
	`user-blocked`
	`user-recycle`
	`user-tick`
	`user-type`
	`user`
	`users-personalization`
	`users-select`
	`variation-1-1`
	`variation-16-9`
	`variation-3-2`
	`variation-4-3`
	`variation-custom`
	`version-compare-action`
	`version-compare`
	`versions`
	`vertical-left-right`
	`video`
	`view-custom`
	`view-desktop`
	`view-grid`
	`view-hide`
	`view-list`
	`view-mobile`
	`view-tablet`
	`view`
	`wand`
	`warning-triangle`
	`warning`
	`wiki-file`
	`wiki`
	`workflow`