Skip to content
Design System

Icon

Design guidelines

Code

Section titled “ Code”
HTML
React
Angular
<certara-icon icon="circle-check" size="24"></certara-icon>
<certara-icon icon="user" size="24"></certara-icon>
<certara-icon icon="gear" size="24"></certara-icon>
<certara-icon icon="bell" size="24"></certara-icon>
import { CertaraIcon } from '@certara/certara-ui-react';


<CertaraIcon icon="circle-check" size={24} />
<CertaraIcon icon="user" size={24} />
<CertaraIcon icon="gear" size={24} />
<CertaraIcon icon="bell" size={24} />
// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';


@NgModule({
  imports: [CertaraUiAngularModule]
})


// In your template:
<certara-icon icon="circle-check" size="24"></certara-icon>
<certara-icon icon="user" size="24"></certara-icon>
<certara-icon icon="gear" size="24"></certara-icon>
<certara-icon icon="bell" size="24"></certara-icon>

Sizes

Section titled “Sizes”
HTML
React
Angular
<certara-icon icon="circle-check" variant="solid" size="24"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="20"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="18"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="16"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="14"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="12"></certara-icon>
import { CertaraIcon } from '@certara/certara-ui-react';


<CertaraIcon icon="circle-check" variant="solid" size={24} />
<CertaraIcon icon="circle-check" variant="solid" size={20} />
<CertaraIcon icon="circle-check" variant="solid" size={18} />
<CertaraIcon icon="circle-check" variant="solid" size={16} />
<CertaraIcon icon="circle-check" variant="solid" size={14} />
<CertaraIcon icon="circle-check" variant="solid" size={12} />
// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';


@NgModule({
  imports: [CertaraUiAngularModule]
})


// In your template:
<certara-icon icon="circle-check" variant="solid" size="24"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="20"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="18"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="16"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="14"></certara-icon>
<certara-icon icon="circle-check" variant="solid" size="12"></certara-icon>

Sprite mode

Section titled “Sprite mode”

Use sprite attribute for better performance when using many icons.

HTML
React
Angular
<certara-icon icon="circle-check" sprite="true" size="24"></certara-icon>
<certara-icon icon="house" sprite="true" size="24"></certara-icon>
<certara-icon icon="folder" sprite="true" size="24"></certara-icon>
import { CertaraIcon } from '@certara/certara-ui-react';


<CertaraIcon icon="circle-check" sprite={true} size={24} />
<CertaraIcon icon="house" sprite={true} size={24} />
<CertaraIcon icon="folder" sprite={true} size={24} />
// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';


@NgModule({
  imports: [CertaraUiAngularModule]
})


// In your template:
<certara-icon icon="circle-check" sprite="true" size="24"></certara-icon>
<certara-icon icon="house" sprite="true" size="24"></certara-icon>
<certara-icon icon="folder" sprite="true" size="24"></certara-icon>

certara-icon

Section titled “certara-icon”

Renders a Font Awesome icon by name from the bundled SVG sprites, or an arbitrary SVG fetched from src.

Properties

Section titled “Properties”

icon

Attributeicon
Typestring
Defaultundefined
Requiredfalse
DescriptionName of icon. List of available Font Awesome icons

name

Attributename
Typestring
Defaultundefined
Requiredfalse
DescriptionName of icon. List of available Font Awesome icons DEPRECATED. Use icon instead. Will be removed in the next major version.

size

Attributesize
Type11 | 12 | 14 | 16 | 18 | 20 | 24 | string
Default''
Requiredfalse
DescriptionSet of predefined sizing options, but can accept any valid CSS value

sprite

Attributesprite
Typeboolean
Defaultfalse
Requiredfalse
DescriptionUse sprite sheet for icons (deprecated, kept for backwards compatibility)

src

Attributesrc
Typestring
Defaultundefined
Requiredfalse
DescriptionSet a custom path to an SVG instead of using icon

variant

Attributevariant
Type"light" | "regular" | "solid"
Default'regular'
Requiredfalse
DescriptionWeight of icon style

Events

Section titled “Events”

There are no events available for this component

Methods

Section titled “Methods”

There are no public methods available for this component

Slots

Section titled “Slots”

There are no slots available for this component

Icons are used to visually communicate core parts of the product and available actions. They can help users understand where they are in the product and what common interaction patterns are available.

Design guidelines

Section titled “Design guidelines”
Relies on the third-party library Font Awesome SVG sprites (HTML and Twirl), or the Font Awesome javascript API (React).View all resources

Variants

Section titled “Variants”

We load the SVG icons on demand from an icon sprite sheet. The SVG symbol ID is the icon’s name the in FontAwesome’s library.

Size

Section titled “Size”

By default, icons size according to their inline content. Set icons to a specific size with these tokens.

VisualREMPXClassCopy

  • 1.5
    24
    .icon-24
  • 1.25
    20
    .icon-20
  • 1.125
    18
    .icon-18
  • 1
    16
    .icon-16
  • .875
    14
    .icon-14
  • 0.75
    12
    .icon-12
  • 0.688
    11
    .icon-11

Condensed color palette

Section titled “Condensed color palette”

By default, icons inherit colors from their parent context including pseudo states like :hover, :active, and :focus. Set a specific color by including one of these classes with icon. For example, class="icon icon-brand"

If there are interactive pseudo states that effect a change of text color (:hover, :active, :focus, etc.), this will cascade down into the SVG icon fill.

VisualValueClassCopy

  • Neutral

    gray-800
    .icon-neutral

  • Neutral subtle

    gray-500
    .icon-neutral-subtle

  • Neutral subtler

    gray-400
    .icon-neutral-subtler

  • Brand

    brand-700
    .icon-brand

  • Inverse

    white
    .icon-inverse

  • Success

    success-700
    .icon-success

  • Danger

    danger-700
    .icon-danger

  • Info

    info-700
    .icon-info

  • Warning

    warning-800
    .icon-warning

  • Accent orange

    orange-600
    .icon-accent-orange

  • Accent cyan

    cyan-600
    .icon-cyan-orange

  • Accent olive

    olive-700
    .icon-accent-olive

  • Accent magenta

    magenta-600
    .icon-accent-magenta

Accessibility

Section titled “Accessibility”
  • Use icons in combination with meaningful UI text to ensure comprehension and accessibility.
  • For icons with no accompanying UI text, also include an aria-label for the icon. There are very few widely recognized icons, so try to avoid this when possible.
  • Learn more about meaningful text labels in accessibility guidelines.
  • Icons must have an tooltip attached unless it has text that communicates what the icon is conveying. Use tooltips to let the user know what happens when the tab is selected. When writing tooltips, be short and concise and follow the content guidelines.

Design resources

Section titled “Design resources”

Icon Library

Section titled “Icon Library”
  • We use FontAwesome Pro (FA) for most of our icon needs. If an icon from this library does not meet our need, we can create a custom icon.
  • We support:
    • Version 6.5.1
    • Light, Regular, Solid and Thin styles
Search FA’s icon libraryView icons in Figma