Global CSS API: Icons
The following CSS custom properties are used to control form UI icons.
| Property | Description | Default |
|---|---|---|
| --gf-icon-font-family | Font family for the form icons. | "gform-icons-orbital" |
| --gf-icon-font-size | Size used for the form icon font. | 20px |
| --gf-icon-ctrl-checkbox | Checkbox control checked icon. | "\e900" |
| --gf-icon-ctrl-select-down | Select control down arrow icon. | "\e901" |
| --gf-icon-ctrl-select-up | Select control up arrow icon. | "\e902" |
| --gf-icon-ctrl-select | Select control icon. | url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23686E77'/%3E%3C/svg%3E") |
| --gf-icon-ctrl-search | Search control icon for the enhanced select control UI. | url("data:image/svg+xml,%3Csvg width='640' height='640' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256 128c-70.692 0-128 57.308-128 128 0 70.691 57.308 128 128 128 70.691 0 128-57.309 128-128 0-70.692-57.309-128-128-128zM64 256c0-106.039 85.961-192 192-192s192 85.961 192 192c0 41.466-13.146 79.863-35.498 111.248l154.125 154.125c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0L367.248 412.502C335.862 434.854 297.467 448 256 448c-106.039 0-192-85.962-192-192z' fill='%23686E77'/%3E%3C/svg%3E") |
| --gf-icon-ctrl-cancel | Remove selected item icon for the enhanced multiple select control UI. | "\e918" |
| --gf-icon-ctrl-number | Number control icon. | url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='%23686E77'/%3E%3C/svg%3E") |
| --gf-icon-ctrl-pwd-hidden | Password field icon when password is hidden. | "\e90a" |
| --gf-icon-ctrl-pwd-visible | Password field icon when password is visible. | "\e909" |
| --gf-icon-ctrl-list-item-add | List field icon for adding a new item. | "\e90f" |
| --gf-icon-ctrl-list-item-remove | List field icon for removing an item. | "\e90e" |
| --gf-icon-ctrl-save-continue | Save & Continue button icon. | "\e910" |
| --gf-icon-ctrl-pg-numbers-complete | Paged form step completed icon. | "\e90b" |
| --gf-icon-ctrl-file | File upload control icon for the enhanced file upload control UI. | "\e911" |
| --gf-icon-ctrl-file-completed | File upload control completed icon for the enhanced file upload control UI. | "\e90c" |
| --gf-icon-ctrl-file-cancel | File upload control cancel icon for the enhanced file upload control UI. | "\e904" |
| --gf-icon-ctrl-file-remove | File upload control remove icon for the enhanced file upload control UI. | "\e919" |
| --gf-icon-ctrl-datepicker | Datepicker control and enhanced UI icon. | "\e91a" |
| --gf-icon-ctrl-datepicker-left | Left navigation icon for the enhanced datepicker control UI. | "\e91b" |
| --gf-icon-ctrl-datepicker-right | Right navigation icon for the enhanced datepicker control UI. | "\e91c" |
| --gf-icon-ctrl-img-choice-placeholder | Placeholder icon for the image choice field control. | "\e922" |
| --gf-icon-tooltip-error | Icon used for the form error validation summary UI. | "\e906" |