Time Picker Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Download SVG

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: time picker clock watch schedule hour

The Time Picker icon is available as a free SVG and is ready to drop into any web or app project.

img tag

<img src="https://proicons.com/icon/321097.svg" alt="Time Picker icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321097.svg" alt="Time Picker icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321097.svg"
  alt="Time Picker icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-time-picker {
  background-image: url('https://proicons.com/icon/321097.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<svg width="640" height="360" viewBox="0 0 640 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="time-picker">
<rect id="Rectangle 11 Copy" x="112" y="148" width="114" height="64" fill="#F3F3F3"/>
<rect id="Rectangle 11 Copy 2" x="230" y="148" width="112" height="64" fill="#F3F3F3"/>
<rect id="Rectangle 11 Copy 3" x="346" y="148" width="182" height="64" fill="#F3F3F3"/>
<path id="Path 3 Copy 8" d="M112 211H226" stroke="#8C8C8C"/>
<path id="Path 3 Copy 9" d="M230 211H342" stroke="#8C8C8C"/>
<path id="Path 3 Copy 10" d="M346 211H528" stroke="#8C8C8C"/>
<g id="hh:mm">
<path id="Path" d="M133.952 170.24H135.872V177.632H135.968C136.272 176.928 136.7 176.368 137.252 175.952C137.804 175.536 138.544 175.328 139.472 175.328C140.752 175.328 141.764 175.74 142.508 176.564C143.252 177.388 143.624 178.552 143.624 180.056V188H141.704V180.392C141.704 178.168 140.768 177.056 138.896 177.056C138.512 177.056 138.14 177.104 137.78 177.2C137.42 177.296 137.096 177.44 136.808 177.632C136.52 177.824 136.292 178.068 136.124 178.364C135.956 178.66 135.872 179.008 135.872 179.408V188H133.952V170.24Z" fill="#525252"/>
<path id="Path_2" d="M147.584 170.24H149.504V177.632H149.6C149.904 176.928 150.332 176.368 150.884 175.952C151.436 175.536 152.176 175.328 153.104 175.328C154.384 175.328 155.396 175.74 156.14 176.564C156.884 177.388 157.256 178.552 157.256 180.056V188H155.336V180.392C155.336 178.168 154.4 177.056 152.528 177.056C152.144 177.056 151.772 177.104 151.412 177.2C151.052 177.296 150.728 177.44 150.44 177.632C150.152 177.824 149.924 178.068 149.756 178.364C149.588 178.66 149.504 179.008 149.504 179.408V188H147.584V170.24Z" fill="#525252"/>
<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M161.564 178.04C161.796 178.296 162.168 178.424 162.68 178.424C163.192 178.424 163.564 178.296 163.796 178.04C164.028 177.784 164.144 177.448 164.144 177.032V176.72C164.144 176.304 164.028 175.968 163.796 175.712C163.564 175.456 163.192 175.328 162.68 175.328C162.168 175.328 161.796 175.456 161.564 175.712C161.332 175.968 161.216 176.304 161.216 176.72V177.032C161.216 177.448 161.332 177.784 161.564 178.04ZM161.564 187.904C161.796 188.16 162.168 188.288 162.68 188.288C163.192 188.288 163.564 188.16 163.796 187.904C164.028 187.648 164.144 187.312 164.144 186.896V186.584C164.144 186.168 164.028 185.832 163.796 185.576C163.564 185.32 163.192 185.192 162.68 185.192C162.168 185.192 161.796 185.32 161.564 185.576C161.332 185.832 161.216 186.168 161.216 186.584V186.896C161.216 187.312 161.332 187.648 161.564 187.904Z" fill="#525252"/>
<path id="Path_3" d="M168.225 188V175.616H170.145V177.632H170.241C170.385 177.312 170.549 177.012 170.733 176.732C170.917 176.452 171.141 176.208 171.405 176C171.669 175.792 171.977 175.628 172.329 175.508C172.681 175.388 173.097 175.328 173.577 175.328C174.393 175.328 175.145 175.524 175.833 175.916C176.521 176.308 177.033 176.952 177.369 177.848H177.417C177.641 177.176 178.061 176.588 178.677 176.084C179.293 175.58 180.129 175.328 181.185 175.328C182.449 175.328 183.437 175.74 184.149 176.564C184.861 177.388 185.217 178.552 185.217 180.056V188H183.297V180.392C183.297 179.288 183.081 178.456 182.649 177.896C182.217 177.336 181.529 177.056 180.585 177.056C180.201 177.056 179.837 177.104 179.493 177.2C179.149 177.296 178.841 177.44 178.569 177.632C178.297 177.824 178.081 178.068 177.921 178.364C177.761 178.66 177.681 179.008 177.681 179.408V188H175.761V180.392C175.761 179.288 175.545 178.456 175.113 177.896C174.681 177.336 174.009 177.056 173.097 177.056C172.713 177.056 172.345 177.104 171.993 177.2C171.641 177.296 171.329 177.44 171.057 177.632C170.785 177.824 170.565 178.068 170.397 178.364C170.229 178.66 170.145 179.008 170.145 179.408V188H168.225Z" fill="#525252"/>
<path id="Path_4" d="M189.176 188V175.616H191.096V177.632H191.192C191.336 177.312 191.5 177.012 191.684 176.732C191.868 176.452 192.092 176.208 192.356 176C192.62 175.792 192.928 175.628 193.28 175.508C193.632 175.388 194.048 175.328 194.528 175.328C195.344 175.328 196.096 175.524 196.784 175.916C197.472 176.308 197.984 176.952 198.32 177.848H198.368C198.592 177.176 199.012 176.588 199.628 176.084C200.244 175.58 201.08 175.328 202.136 175.328C203.4 175.328 204.388 175.74 205.1 176.564C205.812 177.388 206.168 178.552 206.168 180.056V188H204.248V180.392C204.248 179.288 204.032 178.456 203.6 177.896C203.168 177.336 202.48 177.056 201.536 177.056C201.152 177.056 200.788 177.104 200.444 177.2C200.1 177.296 199.792 177.44 199.52 177.632C199.248 177.824 199.032 178.068 198.872 178.364C198.712 178.66 198.632 179.008 198.632 179.408V188H196.712V180.392C196.712 179.288 196.496 178.456 196.064 177.896C195.632 177.336 194.96 177.056 194.048 177.056C193.664 177.056 193.296 177.104 192.944 177.2C192.592 177.296 192.28 177.44 192.008 177.632C191.736 177.824 191.516 178.068 191.348 178.364C191.18 178.66 191.096 179.008 191.096 179.408V188H189.176Z" fill="#525252"/>
</g>
<g id="Timezone">
<path id="Path_5" d="M369.432 173.024V188H367.416V173.024H362.088V171.248H374.76V173.024H369.432Z" fill="#161616"/>
<path id="Shape_2" fill-rule="evenodd" clip-rule="evenodd" d="M377.388 172.412C377.572 172.612 377.872 172.712 378.288 172.712C378.704 172.712 379.004 172.612 379.188 172.412C379.372 172.212 379.464 171.952 379.464 171.632V171.32C379.464 171 379.372 170.74 379.188 170.54C379.004 170.34 378.704 170.24 378.288 170.24C377.872 170.24 377.572 170.34 377.388 170.54C377.204 170.74 377.112 171 377.112 171.32V171.632C377.112 171.952 377.204 172.212 377.388 172.412ZM379.248 188V175.616H377.328V188H379.248Z" fill="#161616"/>
<path id="Path_6" d="M383.328 188V175.616H385.248V177.632H385.344C385.488 177.312 385.652 177.012 385.836 176.732C386.02 176.452 386.244 176.208 386.508 176C386.772 175.792 387.08 175.628 387.432 175.508C387.784 175.388 388.2 175.328 388.68 175.328C389.496 175.328 390.248 175.524 390.936 175.916C391.624 176.308 392.136 176.952 392.472 177.848H392.52C392.744 177.176 393.164 176.588 393.78 176.084C394.396 175.58 395.232 175.328 396.288 175.328C397.552 175.328 398.54 175.74 399.252 176.564C399.964 177.388 400.32 178.552 400.32 180.056V188H398.4V180.392C398.4 179.288 398.184 178.456 397.752 177.896C397.32 177.336 396.632 177.056 395.688 177.056C395.304 177.056 394.94 177.104 394.596 177.2C394.252 177.296 393.944 177.44 393.672 177.632C393.4 177.824 393.184 178.068 393.024 178.364C392.864 178.66 392.784 179.008 392.784 179.408V188H390.864V180.392C390.864 179.288 390.648 178.456 390.216 177.896C389.784 177.336 389.112 177.056 388.2 177.056C387.816 177.056 387.448 177.104 387.096 177.2C386.744 177.296 386.432 177.44 386.16 177.632C385.888 177.824 385.668 178.068 385.5 178.364C385.332 178.66 385.248 179.008 385.248 179.408V188H383.328Z" fill="#161616"/>
<path id="Shape_3" fill-rule="evenodd" clip-rule="evenodd" d="M406.644 187.832C407.324 188.136 408.088 188.288 408.936 188.288C410.104 188.288 411.112 188.028 411.96 187.508C412.808 186.988 413.432 186.304 413.832 185.456L412.464 184.472C412.144 185.16 411.692 185.688 411.108 186.056C410.524 186.424 409.84 186.608 409.056 186.608C408.48 186.608 407.964 186.512 407.508 186.32C407.052 186.128 406.668 185.864 406.356 185.528C406.044 185.192 405.804 184.796 405.636 184.34C405.468 183.884 405.384 183.392 405.384 182.864V182.288H414.288V181.376C414.288 180.496 414.164 179.688 413.916 178.952C413.668 178.216 413.312 177.58 412.848 177.044C412.384 176.508 411.824 176.088 411.168 175.784C410.512 175.48 409.768 175.328 408.936 175.328C408.088 175.328 407.324 175.48 406.644 175.784C405.964 176.088 405.38 176.524 404.892 177.092C404.404 177.66 404.028 178.344 403.764 179.144C403.5 179.944 403.368 180.832 403.368 181.808C403.368 182.8 403.5 183.692 403.764 184.484C404.028 185.276 404.404 185.956 404.892 186.524C405.38 187.092 405.964 187.528 406.644 187.832ZM407.496 177.212C407.928 177.028 408.408 176.936 408.936 176.936C409.928 176.936 410.724 177.268 411.324 177.932C411.924 178.596 412.224 179.48 412.224 180.584V180.848H405.384V180.68C405.384 180.136 405.472 179.636 405.648 179.18C405.824 178.724 406.068 178.328 406.38 177.992C406.692 177.656 407.064 177.396 407.496 177.212Z" fill="#161616"/>
<path id="Path_7" d="M416.088 188V186.392L423.12 177.296H416.304V175.616H425.448V177.056L418.272 186.32H425.64V188H416.088Z" fill="#161616"/>
<path id="Shape_4" fill-rule="evenodd" clip-rule="evenodd" d="M430.632 187.832C431.32 188.136 432.08 188.288 432.912 188.288C433.744 188.288 434.5 188.136 435.18 187.832C435.86 187.528 436.448 187.092 436.944 186.524C437.44 185.956 437.824 185.276 438.096 184.484C438.368 183.692 438.504 182.8 438.504 181.808C438.504 180.832 438.368 179.944 438.096 179.144C437.824 178.344 437.44 177.66 436.944 177.092C436.448 176.524 435.86 176.088 435.18 175.784C434.5 175.48 433.744 175.328 432.912 175.328C432.08 175.328 431.32 175.48 430.632 175.784C429.944 176.088 429.356 176.524 428.868 177.092C428.38 177.66 428 178.344 427.728 179.144C427.456 179.944 427.32 180.832 427.32 181.808C427.32 182.8 427.456 183.692 427.728 184.484C428 185.276 428.38 185.956 428.868 186.524C429.356 187.092 429.944 187.528 430.632 187.832ZM435.456 185.624C434.8 186.264 433.952 186.584 432.912 186.584C431.872 186.584 431.024 186.264 430.368 185.624C429.712 184.984 429.384 184.008 429.384 182.696V180.92C429.384 179.608 429.712 178.632 430.368 177.992C431.024 177.352 431.872 177.032 432.912 177.032C433.952 177.032 434.8 177.352 435.456 177.992C436.112 178.632 436.44 179.608 436.44 180.92V182.696C436.44 184.008 436.112 184.984 435.456 185.624Z" fill="#161616"/>
<path id="Path_8" d="M441.672 188V175.616H443.592V177.632H443.688C443.992 176.928 444.42 176.368 444.972 175.952C445.524 175.536 446.264 175.328 447.192 175.328C448.472 175.328 449.484 175.74 450.228 176.564C450.972 177.388 451.344 178.552 451.344 180.056V188H449.424V180.392C449.424 178.168 448.488 177.056 446.616 177.056C446.232 177.056 445.86 177.104 445.5 177.2C445.14 177.296 444.816 177.44 444.528 177.632C444.24 177.824 444.012 178.068 443.844 178.364C443.676 178.66 443.592 179.008 443.592 179.408V188H441.672Z" fill="#161616"/>
<path id="Shape_5" fill-rule="evenodd" clip-rule="evenodd" d="M457.668 187.832C458.348 188.136 459.112 188.288 459.96 188.288C461.128 188.288 462.136 188.028 462.984 187.508C463.832 186.988 464.456 186.304 464.856 185.456L463.488 184.472C463.168 185.16 462.716 185.688 462.132 186.056C461.548 186.424 460.864 186.608 460.08 186.608C459.504 186.608 458.988 186.512 458.532 186.32C458.076 186.128 457.692 185.864 457.38 185.528C457.068 185.192 456.828 184.796 456.66 184.34C456.492 183.884 456.408 183.392 456.408 182.864V182.288H465.312V181.376C465.312 180.496 465.188 179.688 464.94 178.952C464.692 178.216 464.336 177.58 463.872 177.044C463.408 176.508 462.848 176.088 462.192 175.784C461.536 175.48 460.792 175.328 459.96 175.328C459.112 175.328 458.348 175.48 457.668 175.784C456.988 176.088 456.404 176.524 455.916 177.092C455.428 177.66 455.052 178.344 454.788 179.144C454.524 179.944 454.392 180.832 454.392 181.808C454.392 182.8 454.524 183.692 454.788 184.484C455.052 185.276 455.428 185.956 455.916 186.524C456.404 187.092 456.988 187.528 457.668 187.832ZM458.52 177.212C458.952 177.028 459.432 176.936 459.96 176.936C460.952 176.936 461.748 177.268 462.348 177.932C462.948 178.596 463.248 179.48 463.248 180.584V180.848H456.408V180.68C456.408 180.136 456.496 179.636 456.672 179.18C456.848 178.724 457.092 178.328 457.404 177.992C457.716 177.656 458.088 177.396 458.52 177.212Z" fill="#161616"/>
</g>
<g id="AM">
<path id="Shape_6" fill-rule="evenodd" clip-rule="evenodd" d="M259.604 183.056L261.284 188H263.396L257.54 171.248H254.972L249.116 188H251.156L252.836 183.056H259.604ZM256.148 173.12H256.268L259.1 181.28H253.316L256.148 173.12Z" fill="#161616"/>
<path id="Path_9" d="M279.237 173.888H279.117L277.701 176.696L273.693 183.992L269.685 176.696L268.269 173.888H268.149V188H266.181V171.248H268.869L273.669 180.272H273.789L278.613 171.248H281.205V188H279.237V173.888Z" fill="#161616"/>
</g>
<g id="icon/navigation/chevron/up/16">
<g id="Group">
<g id="chevron--up">
<path id="Mask" d="M500 184.5L507.5 177L506.44 175.94L500 182.379L493.561 175.94L492.5 177L500 184.5Z" fill="black"/>
<mask id="mask0_0_3855" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="492" y="175" width="16" height="10">
<path id="Mask_2" d="M500 184.5L507.5 177L506.44 175.94L500 182.379L493.561 175.94L492.5 177L500 184.5Z" fill="white"/>
</mask>
<g mask="url(#mask0_0_3855)">
<g id="color/gray/100">
<rect width="30" height="30" transform="matrix(2 0 0 -2 488 192)" fill="#171717"/>
</g>
</g>
</g>
</g>
</g>
<g id="icon/navigation/chevron/up/16 copy">
<g id="Group_2">
<g id="chevron--up_2">
<path id="Mask_3" d="M314 184.5L321.5 177L320.44 175.94L314 182.379L307.561 175.94L306.5 177L314 184.5Z" fill="black"/>
<mask id="mask1_0_3855" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="306" y="175" width="16" height="10">
<path id="Mask_4" d="M314 184.5L321.5 177L320.44 175.94L314 182.379L307.561 175.94L306.5 177L314 184.5Z" fill="white"/>
</mask>
<g mask="url(#mask1_0_3855)">
<g id="color/gray/100_2">
<rect width="30" height="30" transform="matrix(2 0 0 -2 302 192)" fill="#171717"/>
</g>
</g>
</g>
</g>
</g>
<rect id="Rectangle 3 Copy 9" x="112" y="126" width="86" height="10" fill="#8D8D8D"/>
</g>
</svg>

Copied!

Time Picker Icon

More from Carbon Icons