fix(icons): update strokeWidth of action bar items to match, update run from block icon to match run workflow button (#3056)

* fix(icons): update strokeWidth of action bar items to match, update run from block icon to match run workflow button

* update docs

apps/docs/content/docs/en/quick-reference/index.mdx

@@ -280,14 +280,24 @@ A quick lookup for everyday actions in the Sim workflow editor. For keyboard sho
       <td>Click clear button in Chat panel</td>
       <td><ActionImage src="/static/quick-reference/clear-chat.png" alt="Clear chat history" /></td>
     </tr>
+    <tr>
+      <td>Run from block</td>
+      <td>Hover block → Click play button, or right-click → **Run from block**</td>
+      <td><ActionImage src="/static/quick-reference/run-from-block.png" alt="Run from block" /></td>
+    </tr>
+    <tr>
+      <td>Run until block</td>
+      <td>Right-click block → **Run until block**</td>
+      <td><ActionImage src="/static/quick-reference/run-until-block.png" alt="Run until block" /></td>
+    </tr>
     <tr>
       <td>View execution logs</td>
       <td>Open terminal panel at bottom, or `Mod+L`</td>
       <td><ActionImage src="/static/quick-reference/terminal.png" alt="Execution logs terminal" /></td>
     </tr>
     <tr>
-      <td>Filter logs by block or status</td>
-      <td>Click block filter in terminal or right-click log entry → **Filter by Block** or **Filter by Status**</td>
+      <td>Filter logs</td>
+      <td>Click filter icon in terminal → Filter by block or status</td>
       <td><ActionImage src="/static/quick-reference/filter-block.png" alt="Filter logs by block" /></td>
     </tr>
     <tr>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react'
-import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, LogOut, Play } from 'lucide-react'
-import { Button, Copy, Tooltip, Trash2 } from '@/components/emcn'
+import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, LogOut } from 'lucide-react'
+import { Button, Copy, PlayOutline, Tooltip, Trash2 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -172,7 +172,7 @@ export const ActionBar = memo(
                 className={ACTION_BUTTON_STYLES}
                 disabled={disabled || !canRunFromBlock}
               >
-                <Play className={ICON_SIZE} />
+                <PlayOutline className={ICON_SIZE} />
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>

apps/sim/components/emcn/icons/index.ts

@@ -21,7 +21,7 @@ export { Loader } from './loader'
 export { MoreHorizontal } from './more-horizontal'
 export { NoWrap } from './no-wrap'
 export { PanelLeft } from './panel-left'
-export { Play } from './play'
+export { Play, PlayOutline } from './play'
 export { Redo } from './redo'
 export { Rocket } from './rocket'
 export { Trash } from './trash'

apps/sim/components/emcn/icons/play.tsx

@@ -1,7 +1,7 @@
 import type { SVGProps } from 'react'
 
 /**
- * Play icon component
+ * Play icon component (filled/solid version)
  * @param props - SVG properties including className, fill, etc.
  */
 export function Play(props: SVGProps<SVGSVGElement>) {
@@ -21,3 +21,27 @@ export function Play(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+/**
+ * Play icon component (stroke/outline version, matches lucide style)
+ * Uses 24x24 viewBox and strokeWidth 2 for consistency with other icons.
+ * @param props - SVG properties including className, stroke, etc.
+ */
+export function PlayOutline(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path d='M14.7175 4.07175C16.6036 5.37051 18.0001 6.39111 19.0000 7.32600C20.0087 8.26733 20.9617 9.25123 21.3031 10.5484C21.5534 11.4996 21.5534 12.5003 21.3031 13.4515C20.9617 14.7487 20.0087 15.7326 19.0000 16.6739C18.0001 17.6088 16.6037 18.6294 14.7176 19.9281C12.9093 21.1827 11.0470 22.2407 9.6333 22.8420C8.2082 23.4482 6.9090 23.7554 5.6463 23.3976C4.6383 23.1346 3.7940 22.6355 3.1138 21.9492C2.1907 21.0179 1.9001 19.7306 1.7248 18.1814C1.5507 16.6436 1.5507 14.6305 1.5508 12.0701V11.9298C1.5507 9.36936 1.5507 7.35626 1.7248 5.81844C1.9001 4.26926 2.1907 2.982 3.1138 2.05063C3.7940 1.36438 4.6383 0.865267 5.6463 0.602306C6.9090 0.244489 8.2082 0.551707 9.6333 1.15785C11.0470 1.75916 12.9092 2.81712 14.7175 4.07175Z' />
+    </svg>
+  )
+}