- Catalog
- Usage
@servicetitan/anvil2-icons is the allowlist of Lucide icons and custom ServiceTitan SVGs. Web and React Native import from that package. iOS and Android use the generated Anvil2Icon enum, one case per Web export. Core Anvil2 Material and ST SVG icons stay on the Material catalog.VizD owns the allowlist. Consumers cannot add icons from outside the package.Web
pnpm add @servicetitan/anvil2-icons
import { IconPencil } from "@servicetitan/anvil2-icons";
<IconPencil size="large" color="tomato" label="Edit" />;
@servicetitan/anvil2-icons/styles.css directly.Every Icon* export accepts the same props.string
Overrides inherited color. Fixed-color custom SVGs (status marks, brand logos) ignore
color.string
Accessible name. Omit when the icon is decorative.
"small" | "medium" | "large" | "xlarge"
default:"medium"
Maps to 12 / 16 / 24 / 32px.
className and a forwarded ref on the wrapping span.Design sizing guidance for AI Kit lives in Iconography.React Native
Install the package and thereact-native-svg peer dependency.pnpm add @servicetitan/anvil2-icons react-native-svg
import { IconPencil } from "@servicetitan/anvil2-icons/react-native";
<IconPencil size="large" color="tomato" label="Edit" />;
Icon* names as Web. There is no stylesheet. size also accepts a number in points. Icons accept testID and a forwarded View ref. color and label match Web.iOS
Icons ship as theAnvil2Icons product in the anvil2-ios package. Add the Swift package the same way as the other iOS libraries. See Getting Started for iOS.Anvil2Icon has one case per Web export, named without the Icon prefix. IconArrowDown is .arrowDown. IconPencil is .pencil.import Anvil2Icons
Anvil2Icon.pencil.image
.foregroundStyle(theme.semantic.foreground.color.standard)
isTintable == false) keep their own colours. Status marks and brand logos are the multicolour cases.Android
Icons ship incom.servicetitan:anvil2-android-icons. Add that module the same way as the other Android libraries. See Getting Started for Android.Anvil2Icon has one entry per Web export, named without the Icon prefix. IconArrowLeft is Anvil2Icon.ArrowLeft. IconPencil is Anvil2Icon.Pencil. Each entry has drawableRes and isTintable.import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import com.servicetitan.anvil2.icons.Anvil2Icon
val icon = Anvil2Icon.Pencil
Image(
painter = painterResource(icon.drawableRes),
contentDescription = null,
colorFilter = if (icon.isTintable) ColorFilter.tint(color) else null,
)
isTintable == false) with no color filter so they keep their own colours.