Use for displaying icons that represent actions, states, or concepts.
inlineStyles the component to have a height and width of 1em, making it easy to place alongside text.
labelThe text that is presented by screen-readers when they encounter the icon.
typeThe name of the icon to be displayed.
Our icon library categorizes icons based on their visual attributes using specific suffixes. Here's a breakdown of what these suffixes indicate:
-color: Icons with the -color suffix use the standard color scheme specific to their representation. These icons are usually colored versions of what might otherwise be line drawings. Examples include os-windows-color, brand-youtube-color, browser-firefox-color, and rss-color.-filled: This suffix denotes icons that are predominantly filled rather than outlined. While these icons often have -color variants (e.g., browser-chrome-color), the -filled versions are designed to be easily customizable with different colors. This makes them versatile for various styling needs.Additionally, it's important to note that some line drawing icons may include elements that can be filled, such as star-remove or statements. However, these are less commonly used.
This naming convention helps users quickly identify the visual characteristics of icons and choose the appropriate style for their applications.
Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.
How to build an Account List page in Tecton: a summary header and a searchable, client-filtered account list.
How to build a Bank Statement page in Tecton: a computed account summary and a q2-data-table of transactions for a statement period.
How to build a Funds Transfer form in Tecton: a single-column transfer with rich account options, a recurrence schedule, and client-side validation.
How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.
The following CSS variables are available to override the default theme styles of the q2-icon component.
Other components in the Tecton library use this component, including:
q2-action-sheetq2-avatarq2-calendarq2-cardq2-carouselq2-chart-donutq2-checkboxq2-checkbox-groupq2-data-tableq2-dropdownq2-dropdown-itemq2-editable-fieldq2-file-pickerq2-inputq2-linkq2-messageq2-modalq2-month-pickerq2-optionq2-otpq2-paginationq2-pillq2-radio-groupq2-sectionq2-stepperq2-stepper-verticalq2-tab-containerq2-tagq2-textareaq2-toastThe changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.