HomeGetting StartedColor SystemTypographySpacingIconographyLayoutInstallationUsageAngularBlazorReactSvelteVueThemingTypographyCustomizationCSS-Only ComponentsFormsIconsIllustrationsAccessibilityGlobal ConfigurationTailwind CSSSass LibraryForge MCP ServerDropdown OptionsFocus Indicator ClippingAll componentsButtonButton AreaChipFloating Action ButtonIcon ButtonSplit ButtonAutocompleteButton ToggleCalendarCheckboxChip FieldColor PickerDate PickerDate Range PickerFile PickerLabelRadioSelectSliderSwitchText FieldTime PickerApp BarApp LauncherDrawerMenuPaginatorSkip LinkStepperTabsView SwitcherAccordionApp LayoutCardDividerExpansion PanelScaffoldSplit ViewStackStructured CardToolbarBadgeBannerBusy IndicatorCircular ProgressDialogInline MessageLinear ProgressPage StateSkeletonToastTooltipAvatarIconKeyLabel ValueListMeterSecretTableTimelineTimestampTreeKeyboard ShortcutPopoverIntroductionColorTypographySpacingShapeBorderElevationLayeringAnimationUsageIcon LibraryBlocksRoadmapChangelogBlog

Illustrations

Using Tyler Forge illustrations in your application.

Tyler Forge provides a set of illustrations that can be used in your application. Illustrations are a key element of the Tyler brand system. Illustrations provide a sense of personality and familiarity and can make complex ideas more accessible.

To learn more about Tyler Forge illustrations view the design system documentation here.

Library

The illustration library can also be viewed in the design system here.

Types

Tyler Forge illustrations are available in the following types:

  • Spot: Use these small simple illustrations to convey meaning within a component such as a card. They’re used to add meaning, clarity, and visual intrigue.
  • Spot Hero: Use these larger and more complex illustrations to communicate literal or metaphorical ideas within a limited space. They’re used for empty states, error messages, page headers, and larger card graphics.
  • Here: Hero illustrations are more complex and heavy on narrative. They are interesting, engaging and usually feature people in order to tell a full story. Use them for larger content containers such as full width headers.

Usage

Illustrations are just images in various formats such as .svg, .png, or .jpg.

Example

You can use these images in your application via the <img> tag:

<img src="https://cdn.forge.tylertech.com/v1/images/spot-hero/404-error-spot-hero.svg" alt="Illustration description" />

Important: always provide an alt attribute for assistive technologies.

404 Error

Contribution

If you would like to contribute to the illustration library, please reach out to the Tyler Forge team. The illustrations are not currently open source.

Loading Forge chat…