Icon

Show design guidelines

Code

Framework HTML React Angular

Regular

Toggle dark mode

<certara-icon name="circle-check" size="24"></certara-icon>
<certara-icon name="user" size="24"></certara-icon>
<certara-icon name="gear" size="24"></certara-icon>
<certara-icon name="bell" size="24"></certara-icon>

import { CertaraIcon } from '@certara/certara-ui-react';

<CertaraIcon name="circle-check" size={24} />
<CertaraIcon name="user" size={24} />
<CertaraIcon name="gear" size={24} />
<CertaraIcon name="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 name="circle-check" size="24"></certara-icon>
<certara-icon name="user" size="24"></certara-icon>
<certara-icon name="gear" size="24"></certara-icon>
<certara-icon name="bell" size="24"></certara-icon>

Solid

Toggle dark mode

<certara-icon name="circle-check" variant="solid" size="24"></certara-icon>
<certara-icon name="user" variant="solid" size="24"></certara-icon>
<certara-icon name="gear" variant="solid" size="24"></certara-icon>
<certara-icon name="bell" variant="solid" size="24"></certara-icon>

import { CertaraIcon } from '@certara/certara-ui-react';

<CertaraIcon name="circle-check" variant="solid" size={24} />
<CertaraIcon name="user" variant="solid" size={24} />
<CertaraIcon name="gear" variant="solid" size={24} />
<CertaraIcon name="bell" variant="solid" 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 name="circle-check" variant="solid" size="24"></certara-icon>
<certara-icon name="user" variant="solid" size="24"></certara-icon>
<certara-icon name="gear" variant="solid" size="24"></certara-icon>
<certara-icon name="bell" variant="solid" size="24"></certara-icon>

Light

Toggle dark mode

<certara-icon name="circle-check" variant="light" size="24"></certara-icon>
<certara-icon name="user" variant="light" size="24"></certara-icon>
<certara-icon name="gear" variant="light" size="24"></certara-icon>
<certara-icon name="bell" variant="light" size="24"></certara-icon>

import { CertaraIcon } from '@certara/certara-ui-react';

<CertaraIcon name="circle-check" variant="light" size={24} />
<CertaraIcon name="user" variant="light" size={24} />
<CertaraIcon name="gear" variant="light" size={24} />
<CertaraIcon name="bell" variant="light" 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 name="circle-check" variant="light" size="24"></certara-icon>
<certara-icon name="user" variant="light" size="24"></certara-icon>
<certara-icon name="gear" variant="light" size="24"></certara-icon>
<certara-icon name="bell" variant="light" size="24"></certara-icon>

Thin

Toggle dark mode

<certara-icon name="circle-check" variant="thin" size="24"></certara-icon>
<certara-icon name="user" variant="thin" size="24"></certara-icon>
<certara-icon name="gear" variant="thin" size="24"></certara-icon>
<certara-icon name="bell" variant="thin" size="24"></certara-icon>

import { CertaraIcon } from '@certara/certara-ui-react';

<CertaraIcon name="circle-check" variant="thin" size={24} />
<CertaraIcon name="user" variant="thin" size={24} />
<CertaraIcon name="gear" variant="thin" size={24} />
<CertaraIcon name="bell" variant="thin" 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 name="circle-check" variant="thin" size="24"></certara-icon>
<certara-icon name="user" variant="thin" size="24"></certara-icon>
<certara-icon name="gear" variant="thin" size="24"></certara-icon>
<certara-icon name="bell" variant="thin" size="24"></certara-icon>

Sizes

Framework HTML React Angular

Preset sizes

Toggle dark mode

<certara-icon name="circle-check" variant="solid" size="24"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="20"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="18"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="16"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="14"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="12"></certara-icon>

import { CertaraIcon } from '@certara/certara-ui-react';

<CertaraIcon name="circle-check" variant="solid" size={24} />
<CertaraIcon name="circle-check" variant="solid" size={20} />
<CertaraIcon name="circle-check" variant="solid" size={18} />
<CertaraIcon name="circle-check" variant="solid" size={16} />
<CertaraIcon name="circle-check" variant="solid" size={14} />
<CertaraIcon name="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 name="circle-check" variant="solid" size="24"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="20"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="18"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="16"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="14"></certara-icon>
<certara-icon name="circle-check" variant="solid" size="12"></certara-icon>

Custom size

Toggle dark mode

<certara-icon name="circle-check" variant="solid" size="48px"></certara-icon>

import { CertaraIcon } from '@certara/certara-ui-react';

<CertaraIcon name="circle-check" variant="solid" size="48px" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-icon name="circle-check" variant="solid" size="48px"></certara-icon>

Sprite mode

Use sprite attribute for better performance when using many icons.

Framework HTML React Angular

Toggle dark mode

<certara-icon name="circle-check" sprite="true" size="24"></certara-icon>
<certara-icon name="house" sprite="true" size="24"></certara-icon>
<certara-icon name="folder" sprite="true" size="24"></certara-icon>

import { CertaraIcon } from '@certara/certara-ui-react';

<CertaraIcon name="circle-check" sprite={true} size={24} />
<CertaraIcon name="house" sprite={true} size={24} />
<CertaraIcon name="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 name="circle-check" sprite="true" size="24"></certara-icon>
<certara-icon name="house" sprite="true" size="24"></certara-icon>
<certara-icon name="folder" sprite="true" size="24"></certara-icon>

certara-icon

Properties

name

Attribute	name
Type	string
Default	undefined
Required	false
Description	Name of icon as defined by Font Awesome at https://fontawesome.com/search

size

Attribute	size
Type	11 | 12 | 14 | 16 | 18 | 20 | 24 | string
Default	''
Required	false
Description	Set of predefined sizing options. can accept any valid CSS value. if no value is provided, the icon will be sized to 1em/container font size

sprite

Attribute	sprite
Type	boolean
Default	false
Required	false
Description	When true, uses the SVG sprite sheet instead of fetching individual SVGs.
This is more performant when using many icons as it avoids multiple HTTP requests.

src

Attribute	src
Type	string
Default	undefined
Required	false
Description	Set a custom path to an svg instad of using name

variant

Attribute	variant
Type	"light" | "regular" | "solid"
Default	'regular'
Required	false
Description	Weight of icon style

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component