train from IconPark by ByteDance · Color · Travel · Apache-2.0 Free for personal and commercial use.

Name
train
Set
IconPark
Style
Color
Category
Travel
Viewbox
48×48
License
Apache 2.0

The same icon in other sets

More travel icons from IconPark

Use the train icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" stroke-linejoin="round" stroke-width="4" d="M9 8.83932C9 7.90724 9.43829 7.03279 10.2715 6.61502C12.2462 5.62486 16.6123 4 24 4C31.3877 4 35.7538 5.62486 37.7285 6.61502C38.5617 7.0328 39 7.90724 39 8.83932V36C39 37.1046 38.1046 38 37 38H11C9.89543 38 9 37.1046 9 36V8.83932Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M34 38V42"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M14 38V42"/><path fill="#000" stroke="#000" d="M20.5 32C20.5 32.8284 19.8284 33.5 19 33.5C18.1716 33.5 17.5 32.8284 17.5 32C17.5 31.1716 18.1716 30.5 19 30.5C19.8284 30.5 20.5 31.1716 20.5 32Z"/><path fill="#000" stroke="#000" d="M30.5 32C30.5 32.8284 29.8284 33.5 29 33.5C28.1716 33.5 27.5 32.8284 27.5 32C27.5 31.1716 28.1716 30.5 29 30.5C29.8284 30.5 30.5 31.1716 30.5 32Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 44L28 44"/><rect width="30" height="14" x="9" y="12" fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24 12V26"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 12L28 12"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 26L28 26"/></g></svg>

React

import type { SVGProps } from "react";

export function IconParkTrain(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" strokeLinejoin="round" strokeWidth="4" d="M9 8.83932C9 7.90724 9.43829 7.03279 10.2715 6.61502C12.2462 5.62486 16.6123 4 24 4C31.3877 4 35.7538 5.62486 37.7285 6.61502C38.5617 7.0328 39 7.90724 39 8.83932V36C39 37.1046 38.1046 38 37 38H11C9.89543 38 9 37.1046 9 36V8.83932Z"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M34 38V42"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M14 38V42"/><path fill="#000" stroke="#000" d="M20.5 32C20.5 32.8284 19.8284 33.5 19 33.5C18.1716 33.5 17.5 32.8284 17.5 32C17.5 31.1716 18.1716 30.5 19 30.5C19.8284 30.5 20.5 31.1716 20.5 32Z"/><path fill="#000" stroke="#000" d="M30.5 32C30.5 32.8284 29.8284 33.5 29 33.5C28.1716 33.5 27.5 32.8284 27.5 32C27.5 31.1716 28.1716 30.5 29 30.5C29.8284 30.5 30.5 31.1716 30.5 32Z"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M20 44L28 44"/><rect width="30" height="14" x="9" y="12" fill="#2F88FF" stroke="#000" strokeLinejoin="round" strokeWidth="4"/><path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M24 12V26"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M20 12L28 12"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M20 26L28 26"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" stroke-linejoin="round" stroke-width="4" d="M9 8.83932C9 7.90724 9.43829 7.03279 10.2715 6.61502C12.2462 5.62486 16.6123 4 24 4C31.3877 4 35.7538 5.62486 37.7285 6.61502C38.5617 7.0328 39 7.90724 39 8.83932V36C39 37.1046 38.1046 38 37 38H11C9.89543 38 9 37.1046 9 36V8.83932Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M34 38V42"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M14 38V42"/><path fill="#000" stroke="#000" d="M20.5 32C20.5 32.8284 19.8284 33.5 19 33.5C18.1716 33.5 17.5 32.8284 17.5 32C17.5 31.1716 18.1716 30.5 19 30.5C19.8284 30.5 20.5 31.1716 20.5 32Z"/><path fill="#000" stroke="#000" d="M30.5 32C30.5 32.8284 29.8284 33.5 29 33.5C28.1716 33.5 27.5 32.8284 27.5 32C27.5 31.1716 28.1716 30.5 29 30.5C29.8284 30.5 30.5 31.1716 30.5 32Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 44L28 44"/><rect width="30" height="14" x="9" y="12" fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24 12V26"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 12L28 12"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 26L28 26"/></g></svg>
</template>

CSS

.icon-train {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M9%208.83932C9%207.90724%209.43829%207.03279%2010.2715%206.61502C12.2462%205.62486%2016.6123%204%2024%204C31.3877%204%2035.7538%205.62486%2037.7285%206.61502C38.5617%207.0328%2039%207.90724%2039%208.83932V36C39%2037.1046%2038.1046%2038%2037%2038H11C9.89543%2038%209%2037.1046%209%2036V8.83932Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M34%2038V42%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M14%2038V42%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20d%3D%22M20.5%2032C20.5%2032.8284%2019.8284%2033.5%2019%2033.5C18.1716%2033.5%2017.5%2032.8284%2017.5%2032C17.5%2031.1716%2018.1716%2030.5%2019%2030.5C19.8284%2030.5%2020.5%2031.1716%2020.5%2032Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20d%3D%22M30.5%2032C30.5%2032.8284%2029.8284%2033.5%2029%2033.5C28.1716%2033.5%2027.5%2032.8284%2027.5%2032C27.5%2031.1716%2028.1716%2030.5%2029%2030.5C29.8284%2030.5%2030.5%2031.1716%2030.5%2032Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M20%2044L28%2044%22%2F%3E%3Crect%20width%3D%2230%22%20height%3D%2214%22%20x%3D%229%22%20y%3D%2212%22%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M24%2012V26%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M20%2012L28%2012%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M20%2026L28%2026%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M9%208.83932C9%207.90724%209.43829%207.03279%2010.2715%206.61502C12.2462%205.62486%2016.6123%204%2024%204C31.3877%204%2035.7538%205.62486%2037.7285%206.61502C38.5617%207.0328%2039%207.90724%2039%208.83932V36C39%2037.1046%2038.1046%2038%2037%2038H11C9.89543%2038%209%2037.1046%209%2036V8.83932Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M34%2038V42%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M14%2038V42%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20d%3D%22M20.5%2032C20.5%2032.8284%2019.8284%2033.5%2019%2033.5C18.1716%2033.5%2017.5%2032.8284%2017.5%2032C17.5%2031.1716%2018.1716%2030.5%2019%2030.5C19.8284%2030.5%2020.5%2031.1716%2020.5%2032Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20stroke%3D%22%23000%22%20d%3D%22M30.5%2032C30.5%2032.8284%2029.8284%2033.5%2029%2033.5C28.1716%2033.5%2027.5%2032.8284%2027.5%2032C27.5%2031.1716%2028.1716%2030.5%2029%2030.5C29.8284%2030.5%2030.5%2031.1716%2030.5%2032Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M20%2044L28%2044%22%2F%3E%3Crect%20width%3D%2230%22%20height%3D%2214%22%20x%3D%229%22%20y%3D%2212%22%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M24%2012V26%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M20%2012L28%2012%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M20%2026L28%2026%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/train.svg?color=%231a73e8&size=48