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

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

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, but can accept any valid CSS value

sprite

Attribute	sprite
Type	boolean
Default	false
Required	false
Description	Use sprite sheet for icons (deprecated, kept for backwards compatibility)

src

Attribute	src
Type	string
Default	undefined
Required	false
Description	Set a custom path to an SVG instead 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