feat(typesafe): add theme-aware brand icon

Author: Bill Leoutsakos

apps/docs/components/icons.tsx

@@ -2532,6 +2532,19 @@ export function TypeformIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
+export function TypeSafeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox='0 0 102.6 144' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M49.119.607a4.56 4.56 0 0 1 4.558.006l.005-.006L77.11 14.128a4.57 4.57 0 0 1 2.28 3.954v24.252l20.835 12.043a4.56 4.56 0 0 1 2.29 3.955v54.072a4.56 4.56 0 0 1-2.284 3.954l-.006-.006c-.044.026-.08.052-.11.066l-.027.011-46.702 26.959a4.6 4.6 0 0 1-4.031.269l-.544-.269-23.34-13.531-.038-.022a4.58 4.58 0 0 1-2.28-3.96v-24.224L2.46 89.684h-.01l-.176-.104a4.6 4.6 0 0 1-1.34-1.186l-.006-.006a4.6 4.6 0 0 1-.642-1.203l.005-.005A4.5 4.5 0 0 1 0 85.63V31.565c0-1.633.88-3.145 2.29-3.96zm-12.28 125.279 14.262 8.265 37.707-21.758-14.274-8.249zM55.972 61.27v24.4a4.56 4.56 0 0 1-2.724 4.157l-20.962 12.148v15.992l37.685-21.731V53.164zm23.143 34.977 14.267 8.238V60.968l-14.267-8.244zm-65.407-10.61 13.883 8.029 14.25-8.249-13.85-7.996zM9.143 34.195v43.539l14.295-8.227V45.085c0-1.635.865-3.142 2.285-3.96l21.11-12.169V12.464zm23.428 35.323 13.982 8.051V61.11l-13.982-8.078zm4.563-24.427 13.873 8.029 14.278-8.243-13.883-8.007zm18.837-16.13 14.29 8.222V20.718l-14.29-8.248z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+}
+
 export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg

apps/docs/components/ui/icon-mapping.ts

@@ -286,6 +286,7 @@ import {
   TTSIcon,
   TwilioIcon,
   TypeformIcon,
+  TypeSafeIcon,
   UpstashIcon,
   UptimeRobotIcon,
   VantaIcon,
@@ -648,7 +649,7 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   twilio_sms: TwilioIcon,
   twilio_voice: TwilioIcon,
   typeform: TypeformIcon,
-  typesafe: ApiIcon,
+  typesafe: TypeSafeIcon,
   upstash: UpstashIcon,
   uptimerobot: UptimeRobotIcon,
   vanta: VantaIcon,

apps/sim/blocks/blocks/typesafe.ts

@@ -1,4 +1,4 @@
-import { ApiIcon } from '@/components/icons'
+import { TypeSafeIcon } from '@/components/icons'
 import { AuthMode, type BlockConfig, type BlockMeta, IntegrationType } from '@/blocks/types'
 import type { TypeSafeResponse } from '@/tools/typesafe/types'
 
@@ -13,7 +13,7 @@ export const TypeSafeBlock: BlockConfig<TypeSafeResponse> = {
   category: 'tools',
   integrationType: IntegrationType.AI,
   bgColor: '#343A40',
-  icon: ApiIcon,
+  icon: TypeSafeIcon,
   canvasPresentation: {
     defaultTitle: 'TypeSafe (Jev)',
     sentences: {
@@ -222,7 +222,7 @@ export const TypeSafeBlockMeta = {
   url: 'https://typesafe.ai',
   templates: [
     {
-      icon: ApiIcon,
+      icon: TypeSafeIcon,
       title: 'TypeSafe support ticket routing',
       prompt:
         'Build a workflow that accepts a support ticket, uses TypeSafe Choose an Option with billing, technical, and account criteria, then routes the selected choice through a Condition block. Send low-confidence decisions to a review branch and retain the probabilities.',
@@ -231,7 +231,7 @@ export const TypeSafeBlockMeta = {
       tags: ['routing', 'automation', 'support'],
     },
     {
-      icon: ApiIcon,
+      icon: TypeSafeIcon,
       title: 'TypeSafe ticket urgency scoring',
       prompt:
         'Build a workflow that reads support tickets from a table and uses TypeSafe Assign a Score with five ordered urgency descriptions. Store each fractional score, confidence, and rubric, then use a Condition block with a configurable escalation threshold.',
@@ -240,7 +240,7 @@ export const TypeSafeBlockMeta = {
       tags: ['scoring', 'support', 'automation'],
     },
     {
-      icon: ApiIcon,
+      icon: TypeSafeIcon,
       title: 'TypeSafe LLM content screening',
       prompt:
         'Create a workflow that passes an Agent response and policy text to TypeSafe Evaluate Questions. Ask independent Noul questions about policy violations and sensitive-data disclosure. Apply configurable probability thresholds in a Condition block to allow the response or send it for review.',
@@ -249,7 +249,7 @@ export const TypeSafeBlockMeta = {
       tags: ['guardrails', 'llm', 'review'],
     },
     {
-      icon: ApiIcon,
+      icon: TypeSafeIcon,
       title: 'TypeSafe citation verification',
       prompt:
         'Build a workflow that accepts claims and their source passages, uses TypeSafe Evaluate Questions with one independent Noul question per claim about source support, and writes the support probabilities to a table. Route uncertain claims for review using configurable thresholds.',
@@ -258,7 +258,7 @@ export const TypeSafeBlockMeta = {
       tags: ['citations', 'verification', 'research'],
     },
     {
-      icon: ApiIcon,
+      icon: TypeSafeIcon,
       title: 'TypeSafe RAG passage classification',
       prompt:
         'Build a workflow that retrieves knowledge-base passages for a query and classifies each with TypeSafe Choose an Option as relevant, partially relevant, or irrelevant using explicit criteria. Keep the labels and probabilities, then pass selected passages to an Agent.',
@@ -267,7 +267,7 @@ export const TypeSafeBlockMeta = {
       tags: ['rag', 'classification', 'research'],
     },
     {
-      icon: ApiIcon,
+      icon: TypeSafeIcon,
       title: 'TypeSafe entity matching',
       prompt:
         'Create a workflow that reads candidate record pairs from a table, supplies their structured fields to TypeSafe Estimate Yes/No Probability, and asks whether they identify the same real-world entity. Store the probability and use configurable match, non-match, and review bands before any merge.',
@@ -276,7 +276,7 @@ export const TypeSafeBlockMeta = {
       tags: ['matching', 'data-quality', 'review'],
     },
     {
-      icon: ApiIcon,
+      icon: TypeSafeIcon,
       title: 'TypeSafe hierarchical classification',
       prompt:
         'Build a workflow that uses TypeSafe Choose an Option to classify a document into a top-level category, then routes to a second TypeSafe block with only that category’s child options. Store both labels and probability distributions, and review low-confidence decisions at either level.',

apps/sim/components/icons.tsx

@@ -2532,6 +2532,19 @@ export function TypeformIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
+export function TypeSafeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} viewBox='0 0 102.6 144' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M49.119.607a4.56 4.56 0 0 1 4.558.006l.005-.006L77.11 14.128a4.57 4.57 0 0 1 2.28 3.954v24.252l20.835 12.043a4.56 4.56 0 0 1 2.29 3.955v54.072a4.56 4.56 0 0 1-2.284 3.954l-.006-.006c-.044.026-.08.052-.11.066l-.027.011-46.702 26.959a4.6 4.6 0 0 1-4.031.269l-.544-.269-23.34-13.531-.038-.022a4.58 4.58 0 0 1-2.28-3.96v-24.224L2.46 89.684h-.01l-.176-.104a4.6 4.6 0 0 1-1.34-1.186l-.006-.006a4.6 4.6 0 0 1-.642-1.203l.005-.005A4.5 4.5 0 0 1 0 85.63V31.565c0-1.633.88-3.145 2.29-3.96zm-12.28 125.279 14.262 8.265 37.707-21.758-14.274-8.249zM55.972 61.27v24.4a4.56 4.56 0 0 1-2.724 4.157l-20.962 12.148v15.992l37.685-21.731V53.164zm23.143 34.977 14.267 8.238V60.968l-14.267-8.244zm-65.407-10.61 13.883 8.029 14.25-8.249-13.85-7.996zM9.143 34.195v43.539l14.295-8.227V45.085c0-1.635.865-3.142 2.285-3.96l21.11-12.169V12.464zm23.428 35.323 13.982 8.051V61.11l-13.982-8.078zm4.563-24.427 13.873 8.029 14.278-8.243-13.883-8.007zm18.837-16.13 14.29 8.222V20.718l-14.29-8.248z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+}
+
 export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg

apps/sim/lib/integrations/icon-mapping.ts

@@ -16,7 +16,6 @@ import {
   AlgoliaIcon,
   AmplitudeIcon,
   ApifyIcon,
-  ApiIcon,
   ApolloIcon,
   AppConfigIcon,
   ArxivIcon,
@@ -256,6 +255,7 @@ import {
   TriggerDevIcon,
   TwilioIcon,
   TypeformIcon,
+  TypeSafeIcon,
   UpstashIcon,
   UptimeRobotIcon,
   VantaIcon,
@@ -557,7 +557,7 @@ export const blockTypeToIconMap: Record<string, IconComponent> = {
   twilio_sms: TwilioIcon,
   twilio_voice: TwilioIcon,
   typeform: TypeformIcon,
-  typesafe: ApiIcon,
+  typesafe: TypeSafeIcon,
   upstash: UpstashIcon,
   uptimerobot: UptimeRobotIcon,
   vanta: VantaIcon,

packages/deployment-config/src/integrations.json

@@ -25785,7 +25785,7 @@
       "description": "Classify, score, and evaluate input with Jev",
       "longDescription": "Use TypeSafe Jev to choose an option, assign a fractional score, estimate a yes/no probability, or evaluate independent named questions in one request. Supply text or structured state, define criteria, and route results through downstream Condition blocks. All four operations are also available as Agent tools.",
       "bgColor": "#343A40",
-      "iconName": "ApiIcon",
+      "iconName": "TypeSafeIcon",
       "docsUrl": "https://docs.sim.ai/integrations/typesafe",
       "operations": [
         {